Асинхроний JavaScript
"Я кінчу пізніше!" 😀
Функції, що виконуються паралельно з іншими функціями, називаються асинхронними.
Хорошим прикладом є JavaScript setTimeout().
Асинхронний JavaScript
Приклади, використані в попередньому розділі, дуже спрощені.
Метою прикладів було продемонструвати синтаксис функцій зворотного виклику:
Приклад
function myDisplayer(something) {
document.getElementById("demo").innerHTML = something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
Спробуйте самі »
У наведеному вище прикладі myDisplayer є назвою функції.
Він передається в myCalculator() як аргумент.
У реальному світі зворотні виклики найчастіше використовуються з асинхронними функціями.
Типовим прикладом є JavaScript setTimeout().
Очікування тайм-ауту
Коли використовується функція JavaScript setTimeout(), ви можете вказати функцію зворотного виклику, яка буде виконуватися після закінчення часу очікування:
Приклад
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
Спробуйте самі »
У наведеному вище прикладі myFunction використовується як зворотний виклик.
myFunction передається в setTimeout() як аргумент.
3000 — це кількість мілісекунд до тайм-ауту, тому myFunction() буде викликано через 3 секунди.
Примітка
Коли ви передаєте функцію як аргумент, пам’ятайте, що не слід використовувати круглі дужки.
Правильно: setTimeout(myFunction, 3000);
Неправильно: setTimeout(myFunction(), 3000);
Замість того, щоб передавати назву функції як аргумент іншій функції, ви завжди можете передати цілу функцію:
Приклад
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
Спробуйте самі »
У наведеному вище прикладі function(){ myFunction("I love You !!!"); } використовується як зворотний виклик. Це повна функція. Повна функція передається в setTimeout() як аргумент.
3000 — це кількість мілісекунд до тайм-ауту, тому myFunction() буде викликано через 3 секунди.
Очікування інтервалів:
Коли використовується функція JavaScript setInterval(), ви можете вказати функцію зворотного виклику, яка буде виконуватися для кожного інтервалу:
Приклад
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}
Спробуйте самі »
У наведеному вище прикладі myFunction використовується як зворотний виклик.
myFunction передається в setInterval() як аргумент.
1000 — це кількість мілісекунд між інтервалами, тому myFunction() буде викликатися щосекунди.
Альтернативи зворотного виклику
Завдяки асинхронному програмуванню програми JavaScript можуть запускати довгострокові завдання та паралельно виконувати інші завдання.
Але асинхронні програми складно писати та налагоджувати.
Через це більшість сучасних асинхронних методів JavaScript не використовують зворотні виклики. Натомість у JavaScript асинхронне програмування вирішується за допомогою Промісів.
Примітка
Ви дізнаєтеся про проміси в наступному розділі цього підручника на нашому сайті W3Schools українською.
