У цьому посібнику ви дізнаєтесь про функції зворотного виклику JavaScript за допомогою прикладів.
Функція - це блок коду, який виконує певне завдання при виклику. Наприклад,
// function function greet(name) ( console.log('Hi' + ' ' + name); ) greet('Peter'); // Hi Peter
У наведеній вище програмі рядкове значення передається як аргумент greet()функції.
У JavaScript ви також можете передати функцію як аргумент функції. Ця функція, яка передається як аргумент всередині іншої функції, називається функцією зворотного виклику. Наприклад,
// function function greet(name, callback) ( console.log('Hi' + ' ' + name); callback(); ) // callback function function callMe() ( console.log('I am callback function'); ) // passing function as an argument greet('Peter', callMe);
Вихідні дані
Привіт, Пітере, я функція зворотного дзвінка
У наведеній вище програмі є дві функції. Під час виклику greet()функції передаються два аргументи (значення рядка та функція).
callMe()Функція є функцією зворотного виклику.
Перевага функції зворотного дзвінка
Перевага використання функції зворотного виклику полягає в тому, що ви можете дочекатися результату попереднього виклику функції, а потім виконати інший виклик функції.
У цьому прикладі ми збираємось використовувати setTimeout()метод, щоб імітувати програму, для виконання якої потрібен час, наприклад дані, що надходять із сервера.
Приклад: Програма з setTimeout ()
// program that shows the delay in execution function greet() ( console.log('Hello world'); ) function sayName(name) ( console.log('Hello' + ' ' + name); ) // calling the function setTimeout(greet, 2000); sayName('John');
Вихідні дані
Привіт Джон Привіт світ
Як відомо, метод setTimeout () виконує блок коду через зазначений час.
Тут greet()функція викликається через 2000 мілісекунд ( 2 секунди). Під час цього очікування sayName('John');виконується. Ось чому Hello John друкується перед Hello world.
Вищезазначений код виконується асинхронно (друга функція; sayName()не чекає першої функції; greet()завершення).
Приклад: Використання функції зворотного виклику
У наведеному вище прикладі друга функція не чекає завершення першої функції. Однак якщо ви хочете дочекатися результату попереднього виклику функції до того, як буде виконано наступний оператор, ви можете використовувати функцію зворотного виклику. Наприклад,
// Callback Function Example function greet(name, myFunction) ( console.log('Hello world'); // callback function // executed only after the greet() is executed myFunction(name); ) // callback function function sayName(name) ( console.log('Hello' + ' ' + name); ) // calling the function after 2 seconds setTimeout(greet, 2000, 'John', sayName);
Вихідні дані
Привіт світ Привіт Джон
У наведеній вище програмі код виконується синхронно. sayName()Функція передається в якості аргументу greet()функції.
setTimeout()Метод виконує greet()функцію тільки після того, як 2 секунд. Однак sayName()функція чекає виконання greet()функції.
Примітка : Функція зворотного дзвінка корисна, коли вам доводиться чекати результату, який вимагає часу. Наприклад, дані, що надходять із сервера, оскільки для надходження даних потрібен час.
