Що таке функція зворотного виклику в JavaScript?

Ця стаття дає короткий вступ до поняття та використання функцій зворотного виклику в мові програмування JavaScript.

Функції - це Об'єкти

Перше, що нам потрібно знати, це те, що в Javascript функції є першокласними об’єктами. Таким чином, ми можемо працювати з ними так само, як і з іншими об’єктами, наприклад, призначаючи їх змінним та передаючи їх як аргументи в інші функції. Це важливо, оскільки саме остання техніка дозволяє розширити функціональність наших додатків.

Функції зворотного дзвінка

Функція зворотного виклику - це функція, яка передається як аргумент іншій функції, щоб пізніше її «викликати назад». Функція, яка приймає інші функції як аргументи, називається функцією вищого порядку , яка містить логіку, коли виконується функція зворотного виклику. Саме їх поєднання дозволяє розширити наші функціональні можливості.

Для ілюстрації зворотних викликів почнемо з простого прикладу:

function createQuote(quote, callback){ var myQuote = "Like I always say, " + quote; callback(myQuote); // 2 } function logQuote(quote){ console.log(quote); } createQuote("eat your vegetables!", logQuote); // 1 // Result in console: // Like I always say, eat your vegetables!

У наведеному вище прикладі createQuoteце функція вищого порядку, яка приймає два аргументи, другий - зворотний виклик. logQuoteФункція використовується для передачі в якості нашої функції зворотного виклику. Коли ми виконуємо createQuoteфункцію (1) , зауважте, що ми не додаємо дужки, logQuoteколи передаємо її як аргумент. Це тому, що ми не хочемо виконувати нашу функцію зворотного виклику відразу, ми просто хочемо передати визначення функції функції вищого порядку, щоб вона могла бути виконана пізніше.

Крім того, нам потрібно переконатися, що якщо функція зворотного виклику, яку ми передаємо, очікує аргументів, ми надаємо ці аргументи під час виконання зворотного виклику (2) . У наведеному вище прикладі це буде callback(myQuote);твердження, оскільки ми знаємо, що logQuoteочікується передача пропозиції.

Крім того, ми можемо передавати анонімні функції як зворотні дзвінки. Наведений нижче виклик createQuoteматиме той самий результат, що і у наведеному вище прикладі:

createQuote("eat your vegetables!", function(quote){ console.log(quote); });

До речі, вам не потрібно використовувати слово "зворотний виклик" як назву вашого аргументу, Javascript просто повинен знати, що це правильна назва аргументу. Виходячи з наведеного вище прикладу, функція нижче буде поводитися точно так само.

function createQuote(quote, functionToCall) { var myQuote = "Like I always say, " + quote; functionToCall(myQuote); }

Навіщо використовувати функції зворотного дзвінка?

Більшу частину часу ми створюємо програми та програми, які працюють синхронно . Іншими словами, деякі наші операції розпочинаються лише після завершення попередніх. Часто, коли ми запитуємо дані з інших джерел, таких як зовнішній API, ми не завжди знаємо, коли наші дані будуть повернуті назад. У цих випадках ми хочемо дочекатися відповіді, але ми не завжди хочемо, щоб весь наш додаток припинявся, поки наші дані отримуються. У цих ситуаціях корисні функції зворотного виклику.

Давайте подивимось на приклад, що імітує запит до сервера:

function serverRequest(query, callback){ setTimeout(function(){ var response = query + "full!"; callback(response); },5000); } function getResults(results){ console.log("Response from the server: " + results); } serverRequest("The glass is half ", getResults); // Result in console after 5 second delay: // Response from the server: The glass is half full!

У наведеному вище прикладі ми робимо фіктивний запит до сервера. Через 5 секунд відповідь змінюється, а потім getResultsвиконується наша функція зворотного виклику . Щоб побачити це в дії, ви можете скопіювати / вставити наведений вище код у інструмент розробника вашого браузера та виконати його.

Крім того, якщо ви вже знайомі з цим setTimeout, ви весь час використовували функції зворотного дзвінка. Аргумент анонімної функції, переданий у setTimeoutвиклик функції наведеного вище прикладу, також є зворотним викликом! Отже, оригінальний зворотний виклик прикладу фактично виконується іншим зворотним викликом. Будьте обережні, щоб не вкласти занадто багато зворотних дзвінків, якщо можете допомогти, оскільки це може призвести до чогось, що називається «пеклом зворотного дзвінка»! Як випливає з назви, з цим неприємно мати справу.