JavaScript Зворотні виклики
"Я передзвоню пізніше!"
Зворотний виклик – це функція, яка передається як аргумент іншій функції.
Ця техніка дозволяє функції викликати іншу функцію.
Функція зворотного виклику може виконуватися після завершення роботи іншої функції.
Послідовність функцій
Функції 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) за допомогою зворотного виклику (myCallback) і дозвольте функції калькулятора виконати зворотний виклик після завершення обчислення:
Приклад
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());
Приклад
// Створити масив
const myNumbers = [4, 1, -20, -7, 5, 9, -6];
// Викликати removeNeg за допомогою зворотного виклику
const posNumbers = removeNeg(myNumbers, (x) => x >= 0);
// Відобразити результат
document.getElementById("demo").innerHTML = posNumbers;
// Зберігати лише додатні числа
function removeNeg(numbers, callback) {
const myArray = [];
for (const x of numbers) {
if (callback(x)) {
myArray.push(x);
}
}
return myArray;
}
Спробуйте самі »
У наведеному вище прикладі (x) => x >= 0 є функцією зворотного виклику.
Він передається до removeNeg() як аргумент.
Коли використовувати зворотній виклик?
Наведені вище приклади не надто цікаві.
Вони спрощені, щоб навчити вас синтаксису зворотного виклику.
Зворотні виклики справді найкращі в асинхронних функціях, де одна функція має чекати іншої функції (наприклад, очікування завантаження файлу).
Асинхронні функції розглядаються в наступному розділі.
