Функции обратного вызова что это?
Все функции JavaScript являются объектами. Некоторые из них имеют параметры, а некоторые нет. Функция обратного вызова — это тип функции JavaScript, в которой в качестве аргумента передается другая функция, которая будет выполняться позднее.
Возможно, вы использовали функцию обратного вызова в своем рабочем процессе и не подозреваете об этом. Рассмотрим эту строку:
button.addEventListener(‘click’, toggleFunction)Если вы работали с кнопками, то могли встретить что-то похожее на строчку выше. addEventListener уже является функцией, а функция переключения — это еще одна функция, переданная ей в качестве аргумента.
В чем важность обратных вызовов?
Сама природа JavaScript заключается в том, что код выполняется построчно слева направо. Подумайте о серии простых функций в JavaScript, например:
function firstOne(){
console.log('This is the first function created')
}
function secondOne(){
console.log('This is the Second function created')
}
function thirdOne(){
console.log('This is the Third function created')
}
firstOne()
secondOne()
thirdOne()Теперь, если вы запустите этот код, вы увидите, что он возвращает это в вашей консоли:
This is the first function created
This is the Second function created
This is the Third function createdВот как работает JavaScript, строка за строкой слева направо. А что, если вторая функция должна была получить данные из внешней базы данных или была задержана по какой-либо другой причине? Другие команды должны продолжать выполняться, пока вторая извлекает данные и затем выполняется. Это то, для чего нужны функции обратного вызова — убедиться, что функции не запускаются до того, как задачи будут успешно выполнены, чтобы о тех задачах, которые не будут выполняться немедленно, можно было позаботиться, не нарушая работу приложения или останавливая другие процессы.
Элементы асинхронных операций в JavaScript делают вашу кодовую базу более эффективной и менее подверженной ошибкам. Давайте посмотрим, как это работает с методом setTimeOut.
function firstOne(){
console.log('This is the first function created')
}
function secondOne(){
console.log('This is the Second function created')
}
function thirdOne(){
console.log('This is the Third function created')
}
firstOne()
setTimeout(secondOne, 2000)
thirdOne()Здесь мы добавили в смесь метод setTimeOut и передали secondOne в качестве аргумента. Этот метод выполняется только через указанные миллисекунды — в нашем случае 2000, что составляет 2 секунды. Это результат:
This is the first function created
This is the Third function created
This is the Second function created
Как используются обратные вызовы?
Существует примерно три способа использования функций обратного вызова. Первый способ - это то, что мы уже видели. Давайте оптимизируем его еще больше:
function firstOne(){
console.log('This is the first function created')
}
function secondOne(){
console.log('This is the Second function created')
}
function thirdOne(){
console.log('This is the Third function created')
}
firstOne()
setTimeout(secondOne, 2000)
thirdOne()Второй способ - это использование анонимной функции, которая выглядит следующим образом:
function firstOne(){
console.log('This is the first function created')
}
function thirdOne(){
console.log('This is the Third function created')
}
setTimeout(function(){
console.log('This is the Second function created')
}, 2000)
firstOne()
thirdOne()Здесь вы видите, что все это определено непосредственно внутри функции setTimeout вместо именованной функции, которая вызывается позже. Это даже более чистый подход.
Другой вариант - использовать функцию стрелки ES6. Это очень похоже на анонимную функцию.
function firstOne(){
console.log('This is the first function created')
}
function thirdOne(){
console.log('This is the Third function created')
}
setTimeout(() =>{
console.log('This is the Second function created')
}, 2000)
firstOne()
thirdOne()Вложенные функции обратного вызова
Самое замечательное в функциях обратного вызова то, что вы можете вложить в них другие функции обратного вызова. Это означает, что функция обратного вызова может содержать другую функцию обратного вызова. Итак, давайте посмотрим на один из них в действии на нашем текущем примере.
function firstOne(){
console.log('This is the first function created')
}
function thirdOne(){
console.log('This is the Third function created')
}
setTimeout(() =>{
console.log('This is the Second function created')
setTimeout(thirdOne, 3000)
}, 2000)
firstOne()Здесь мы помещаем третий параметр в функцию setTimeout, а затем в функцию обратного вызова. Если вы запустите код, вы заметите, что он выполняется первым, вторым, третьим из-за установленных таймеров.
Подведение итогов
Функции обратного вызова - отличный способ расширить возможности функций в JavaScript и с легкостью использовать асинхронные операции. Они предоставляют разработчикам широкие возможности гибкости и способы управления результатами. Вложение обратных вызовов может быть замечательной вещью, но вы должны быть осторожны, так как вы можете попасть в ад обратного вызова, где вы можете вложить множество функций, и вам будет трудно отследить происхождение. Счастливого взлома!
