JavaScript Обратные вызовы
"Я перезвоню позже!"
Обратный вызов (callback) - это функция, переданная в качестве аргумента другой функции.
Этот метод позволяет функции вызывать другую функцию.
Функция обратного вызова может запускаться после завершения другой функции.
Последовательность функций
Функции JavaScript выполняются в той последовательности, в которой они вызываются. Не в той последовательности, в которой они определены.
В этом примере будет отображаться сообщение "Goodbye":
Пример
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()
в качестве аргумента.
Когда вы передаете функцию в качестве аргумента, помните, что нельзя использовать круглые скобки.
Правильно: myCalculator(5, 5, myDisplayer);
Неправильно: myCalculator(5, 5, myDisplayer());
Когда использовать обратный вызов?
Приведенные выше примеры не очень интересны.
Они упрощены, чтобы научить вас синтаксису обратного вызова.
Обратные вызовы действительно эффективны в асинхронных функциях, где одна функция должна ждать, пока другая функция (например, ожидает загрузки файла).
Асинхронные функции рассматриваются в следующей главе этого учебника на нашем сайте W3Schools на русском.