Обратные вызовы JavaScript
"Я перезвоню позже!"
Обратный вызов — это функция, которая передается в качестве аргумента другой функции.
Этот метод позволяет функции вызывать другую функцию
Функция обратного вызова может выполняться после завершения другой функции.
Последовательность функций
Функции JavaScript выполняются в той последовательности, в которой они вызываются. Не в той последовательности, в которой они определены.
В этом примере будет показано «До свидания»:
Пример
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
В этом примере в конечном итоге будет отображаться «Hello»:
Пример
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();
Контроль последовательности
Иногда вы хотели бы иметь лучший контроль над тем, когда выполнять функцию.
Предположим, вы хотите выполнить расчет, а затем отобразить результат.
Вы можете вызвать функцию калькулятора ( myCalculator), сохранить результат, а затем вызвать другую функцию ( myDisplayer) для отображения результата:
Пример
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
return sum;
}
let result = myCalculator(5, 5);
myDisplayer(result);
Или вы можете вызвать функцию калькулятора ( myCalculator), и пусть функция калькулятора вызовет функцию отображения ( myDisplayer):
Пример
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);
Проблема с первым примером выше заключается в том, что вам нужно вызвать две функции для отображения результата.
Проблема со вторым примером заключается в том, что вы не можете запретить функции калькулятора отображать результат.
Теперь пришло время ввести обратный вызов.
Обратные вызовы JavaScript
Обратный вызов — это функция, которая передается в качестве аргумента другой функции.
Используя обратный вызов, вы можете вызвать функцию калькулятора ( myCalculator) с обратным вызовом и позволить функции калькулятора выполнить обратный вызов после завершения вычисления:
Пример
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
В приведенном выше примере myDisplayerэто имя функции.
Он передается в myCalculator()качестве аргумента.
Когда вы передаете функцию в качестве аргумента, помните, что нельзя использовать круглые скобки.
Справа: мой калькулятор (5, 5, мой дисплей);
Неправильный:мой калькулятор (5, 5, мой дисплей ());
Когда использовать обратный вызов?
Приведенные выше примеры не очень интересны.
Они упрощены, чтобы научить вас синтаксису обратного вызова.
Где обратные вызовы действительно хороши, так это в асинхронных функциях, где одна функция должна ждать другую функцию (например, ожидание загрузки файла).
Асинхронные функции рассматриваются в следующей главе.