Далее на странице...
Что такое callback-функции в JavaScript и для чего они нужны?
Callback (в переводе с английского call — вызов, back — обратный) или функция обратного вызова.
Функции в JavaScript вызываются последовательно одна за другой, но порядок их выполнения может быть НЕ последовательным.
И прежде чем начать говорить о callback-функциях, рассмотрим пример с классическими функциями.
Последовательная и асинхронная работа функций
Есть две функции: first() и second(). Сначала вызывается first, затем second.
Но первая функция выполняется с задержкой.
В итоге сначала мы получаем результат работы 2-ой функции second(). А через некоторое время - результат работы 1-ой функции first().
Пример 1.1
/* Функция с задержкой 1 сек. */
function first(){
// do something
function any(){
console.log(1);
}
setTimeout(any, 1000);
}
function second(){
console.log(2);
}
first();
second();
Результат
2
1
В примере при помощи метода setTimeout смоделирована ситуация, при которой одна из функций выполняется с задержкой. В результате порядок вызова функций и порядок их выполнения асинхронны.
При работе в реальных проектах, подобные ситуации с задержкой выполнения функций могут возникать непредсказуемо (например, ожидание ответа от сервера или обработка большого объема данных). В итоге мы можем НЕ получать ожидаемый результат выполнения того или иного скрипта.
Следует запомнить: если функции следуют одна за другой, то они и запускаются последовательно. Но это НЕ значит, что результат их работы мы будем получать также последовательно.
Что такое callback-функция?
Теперь можно перейти к ответу на вопрос: что такое callback-функция?
callback-функция - это функция, которая должна быть выполнена после того, как другая функция завершит свое выполнение.
Шаблон callback-функции
Рассмотрим пример: в функцию в качестве аргумента передается другая - callback-функция, то есть ТА, которая будет выполняться после выполнения основной функции.
Пример 2.1
// Функция №1
function learnJS(lang, callback){
console.log(`Я учу ${lang}`);
callback(); // Вызов callback-функции
}
// Функция №2
function process(){
console.log('Я прошел этот урок');
}
learnJS('JavaScript', process);
Результат
Я учу JavaScript
Я прошел этот урок
1. Есть функция learnJS с двумя аргументами:
- 1-ый аргумент - в данном случае какое-либо строковое значение;
- 2-ой аргумент - это другая (callback) функция.
2. Функция process передается в качестве аргумента функции learnJS и, соответственно, функция process выполняется после выполнения функции learnJS.
Стоит обратить внимание: когда функция №2 передается в качестве аргумента в функцию №1: learnJS('JavaScript', process); то в круглых скобках указывается только имя функции №2 - без круглых скобок.
Так как функция №2 не вызывается, а именно передается. А вызываться она будет уже внутри функции №1 тогда, когда до нее дойдет JS-интерпретатор.
Как вариант, в качестве аргумента функции learnJS может использоваться анонимная функция (функция без имени).
Пример 2.2
function learnJS(lang, callback){
console.log(`Я учу ${lang}`);
callback();
}
learnJS('JavaScript', function(){
console.log('Я прошел этот урок');
});
Результат
Я учу JavaScript
Я прошел этот урок
Итак, использование callback-функций позволяет соблюдать последовательность выполнения функций.
callback-функции на практике
callback-функции на практике используются довольно часто, например, при запросах к серверу. А серверное программирование на Node.js во многом основано на работе с callback-функциями.
Также callback-функции применяются, когда ведется работа с событиями, происходящими на веб-странице. Например, функция будет выполняться только после того, как пользователь сделает определенной действие: клик на элементе страницы и т.п.
Подводя итог, можно сказать следующее: callback-функции позволяют разработчику быть уверенным в том, что какой-либо фрагмент кода не начнет выполняться, пока не закончит свое исполнение другой фрагмент кода.
Читайте также...
Отзывы и комментарии:
Добавил(а):
ilnaz
Дата:
2023-03-10
Хочу узнать об этом по подробнее, желательно с примером: "Также callback-функции применяются, когда ведется работа с событиями, происходящими на веб-странице. Например, функция будет выполняться только после того, как пользователь сделает определенной действие: клик на элементе страницы и т.п."
Дата: 2021-07-30
Доступно-понятно. Про передачу (не вызов) функции без скобок только на вашем сайте нашел. Спасибо!