Функції зворотного виклику JavaScript - що таке зворотні виклики в JS та як ними користуватися

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

Отже, у цьому дописі я хотів би допомогти вам зрозуміти, що таке функції зворотного виклику та як їх використовувати в JavaScript, переглянувши кілька прикладів.

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

У JavaScript функції є об'єктами. Чи можемо ми передавати об'єкти функціям як параметри? Так.

Отже, ми також можемо передавати функції як параметри іншим функціям і викликати їх усередині зовнішніх функцій. Звучить складно? Дозвольте мені показати це в прикладі нижче:

function print(callback) { callback(); }

Функція print () приймає іншу функцію як параметр і викликає її всередині. Це дійсно в JavaScript, і ми називаємо це “зворотним дзвінком”. Отже, функція, яка передається іншій функції як параметр, є функцією зворотного виклику. Але це ще не все.

Ви також можете переглянути відеоверсію функцій зворотного дзвінка нижче:

Навіщо нам потрібні функції зворотного виклику?

JavaScript запускає код послідовно у порядку зверху вниз. Однак є деякі випадки, коли код запускається (або повинен запускатися) після того, як трапляється щось інше, а також не послідовно. Це називається асинхронним програмуванням.

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

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

Як створити зворотний дзвінок

Щоб зрозуміти, що я пояснив вище, дозвольте мені розпочати з простого прикладу. Ми хочемо записати повідомлення на консоль, але воно повинно бути там через 3 секунди.

const message = function() { console.log("This message is shown after 3 seconds"); } setTimeout(message, 3000);

У JavaScript є вбудований метод "setTimeout", який викликає функцію або обчислює вираз через певний проміжок часу (у мілісекундах). Отже, тут функція “повідомлення” викликається через 3 секунди. (1 секунда = 1000 мілісекунд)

Іншими словами, функція повідомлення викликається після того, як щось сталося (через 3 секунди, пройдених для цього прикладу), але не раніше. Тож функція повідомлення - це приклад функції зворотного дзвінка.

Що таке анонімна функція?

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

setTimeout(function() { console.log("This message is shown after 3 seconds"); }, 3000);

Як бачимо, функція зворотного виклику тут не має імені, а визначення функції без імені в JavaScript називається «анонімною функцією». Це робить точно те саме завдання, що і в прикладі вище.

Зворотний дзвінок як функція стрілки

Якщо ви бажаєте, ви також можете написати ту саму функцію зворотного виклику, що і функція стрілки ES6, яка є новим типом функції в JavaScript:

setTimeout(() => { console.log("This message is shown after 3 seconds"); }, 3000);

А як щодо подій?

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

Click here

Цього разу ми побачимо повідомлення на консолі лише тоді, коли користувач натисне на кнопку:

document.queryselector("#callback-btn") .addEventListener("click", function() { console.log("User has clicked on the button!"); });

Отже, тут ми спочатку вибираємо кнопку з її ідентифікатором, а потім додаємо прослуховувач подій методом addEventListener. Це займає 2 параметри. Перший - це його тип, “click”, а другий параметр - функція зворотного виклику, яка реєструє повідомлення при натисканні на кнопку.

Як бачите, функції зворотного виклику також використовуються для оголошень подій у JavaScript.

Загорнути

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

Якщо ви хочете дізнатись більше про веб-розробку, сміливо стежте за мною на Youtube !

Дякую за читання!