«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript


Игра на «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих


Что такое 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-функции позволяют разработчику быть уверенным в том, что какой-либо фрагмент кода не начнет выполняться, пока не закончит свое исполнение другой фрагмент кода.



Читайте также...



Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 2
Что такое callback-функция - Аргумент другой функции
52
Условия if else - Конструкция switch case - Тернарный оператор
68
Циклы while и for - Операторы break и continue
86
Практика часть 2 – Циклы и Условия
92
Объявление функций – Стрелочные функции ES6
104
Методы и свойства строк и чисел - Метод substr - Индекс строки
37
Практика часть 3 - Используем функции
80
Свойства и методы объектов - Деструктуризация объектов ES6
66
Методы массивов - Перебор элементов массива - Псевдомассивы
75
Передача данных по ссылке и по значению – Клонирование объекта
52
Метод assign() – Копирование исходных объектов в целевой объект
41
Копирование массивов - Оператор spread
64
Прототипное Программирование - Прототип и Экземпляр Объекта
43
Свойство proto - Методы Object.create и Object.setPrototypeOf
64
Практика часть 4 - Используем функции как методы объекта
7
Помощь сайту
Yandex-деньги/Ю-Money
410011236419322
Перевод на карту СБ
4276 1300 1671 5819
WebMoney
R711879515665 Z861169301432

Тематические публикации
Популярные заметки
Последние заметки