1. Що таке callback-функції?
2. Як писати callback-функції
3. Створення опціональною функції зворотного виклику
4. Переконайтеся, що callback є функцією
5. Примітка про час
6. Хочете що-небудь додати?

Якщо ви не маєте великого досвіду роботи з JavaScript, але вже використовували JQuery, то, можливо, ви вже використовували функції зворотного виклику. Але, може бути, ви не до кінця розумієте, як вони працюють або як вони влаштовані?

У цьому пості, який базується на тому, що я вивчив за функціями зворотного виклику, я спробую прояснити вас по цій JavaScript техніці.

Що таке callback-функції?

Стаття з Wikipedia каже:

Посилання на виконуваний код, або на фрагмент виконуваного коду, який приймає в якості аргументу іншого коду.

Далі йде простий приклад callback-функції, взятий з JQuery:

$ ( '# Element'). FadeIn ( 'slow', function () {// callback function});

Тут відбувається виклик JQuery методу fadeIn () . Цей метод приймає 2 аргументи: швидкість fade-in анімації і функція зворотного виклику (необов'язковий параметр). У цій функції ви можете писати все, що завгодно.

Коли fadeIn () метод завершиться, callback-функція почне виконуватися, якщо вона задана. Залежно від швидкості анімації, ви можете вибрати затримку до початку виконання функції. Ознайомитися з більш детальніше про callback-функції ви можете тут .

Як писати callback-функції

Якщо ви пишете свої власні функції або методи, вам можуть знадобитися функції зворотного виклику. Далі наведені прості приклади callback-функцій:

function mySandwich (param1, param2, callback) {alert ( 'Started eating my sandwich. \ n \ nIt has:' + param1 + ',' + param2); callback (); } MySandwich ( 'ham', 'cheese', function () {alert ( 'Finished eating my sandwich.');});

Тут ми бачимо функцію mySandwich, яка приймає 3 параметра. Третій параметр - функція зворотного виклику. Коли функція виконується, вона виводить на екран повідомлення з переданими значеннями. Потім виконується функція зворотного виклику.

Зверніть увагу, що фактичний параметр mySandwich є просто «callback» (без дужок), але потім, коли ми викликаємо callback, ми використовуємо круглі дужки.

Сама функція зворотного виклику визначена в третьому параметрі (function () {...}). Цей код має в собі виклик функції alert (), яка говорить, що callback-функція викликана.

Створення опціональною функції зворотного виклику

Всі функції зворотного виклику в JQuery опційні, тобто необов'язкові. Це означає, що метод, який приймає callback-функцію не повертатиме помилку, якщо функція не передати. У простому прикладі нижче, буде виведена помилка, якщо ми викличемо функцію mySandwich без передачі функції «callback»:

function mySandwich (param1, param2, callback) {alert ( 'Started eating my sandwich. \ n \ nIt has:' + param1 + ',' + param2); callback (); } MySandwich ( 'ham', 'cheese');

Дія можна побачити тут . Якщо ви відкриєте свій інструмент розробки, то ви побачите помилку, яка говорить, що «undefined is not a function» (або щось подібне), яке показується після виконання alert повідомлення.

Щоб зробити callback-функцію необов'язковою, ми може зробити так:

function mySandwich (param1, param2, callback) {alert ( 'Started eating my sandwich. \ n \ nIt has:' + param1 + ',' + param2); if (callback) {callback (); }} MySandwich ( 'ham', 'cheese');

Тепер callback-функція буде викликана лише за умови, що вона існує. Ніякої помилки тепер не буде. протестувати можна тут .

Переконайтеся, що callback є функцією

Нарешті, ви можете дізнатися, що третій аргумент є функцією, якщо зробите так:

function mySandwich (param1, param2, callback) {alert ( 'Started eating my sandwich. \ n \ nIt has:' + param1 + ',' + param2); if (callback && typeof (callback) === "function") {callback (); }} MySandwich ( 'ham', 'cheese', 'vegetables');

Зауважте, що ми використовували typeof оператор для перевірки типу значення callback параметра. В даному прикладі ми передали в якості третьої варіанту не функцію, а рядок, але помилки не виникає, тому що у нас коштує перевірка на функцію.

Примітка про час

Не завжди функція може виконатися тоді, коли потрібно. Наприклад, якщо функція включена в який-небудь асинхронний запит (ajax або анімацію), то callback-функція буде викликана після початку асинхронного запиту і, можливо, завершиться раніше асинхронного запиту.

Ось приклад, в якому використовується JQuery animate метод:

function mySandwich (param1, param2, callback) {alert ( 'Started eating my sandwich. \ n \ nIt has:' + param1 + ',' + param2); $ ( '# Sandwich'). Animate ({opacity: 0}, 5000, function () {// Animation complete.}); if (callback && typeof (callback) === "function") {callback (); }} MySandwich ( 'ham', 'cheese', function () {alert ( 'Finished eating my sandwich.');});

демонстрація тут .

Зауважте, що хоча callback-функція розташована після коду анімації, функція зворотного виклику виконається набагато раніше, ніж закінчиться анімація. Вирішити проблему дуже просто: ми повинні помістити функцію зворотного виклику всередину animate методу (туди, де написано «// Animation complete»).

Хочете що-небудь додати?

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

Дякую за увагу!