Функція сну: Як реалізувати sleep() на JavaScript
Коли потрібна пауза у виконанні коду
JavaScript створив Брендан Айк у 1995 році, його задумано як просту мову для скриптів у браузері. За свою майже тридцятирічну історію він еволюціонував із засобу для додавання інтерактивності на вебсторінках до сильної багатофункціональної платформи. Сьогодні JavaScript використовують не лише в браузерах, а й на серверах (завдяки Node.js), у розробці мобільних застосунків, ігор, IoT-рішень і навіть у машинному навчанні.
Попри свою універсальність, JavaScript має певні обмеження, зумовлені його однопотоковістю й асинхронною природою. Одним із таких обмежень є відсутність вбудованої функції sleep(), яка доступна в інших популярних мовах програмування, як-от Python, Java або C++.
Функція сну дозволяє зробити паузу у виконанні коду на певний проміжок часу. Вона може знадобитися, коли потрібно зімітувати затримку, працювати з таймерами або тестувати асинхронні операції. Відсутність вбудованої функції сну може викликати запитання у початківців: як же створити її аналог? У цьому матеріалі ми розглянемо концепцію функції sleep() у JavaScript та її реалізацію за допомогою setTimeout, промісів (Promise) та синтаксису async/await.
Приклади реалізації функції sleep() на JavaScript
Для початку рекомендуємо звернути увагу на функцію setTimeout. Вона відтерміновує виконання коду на час заданої затримки, але не призупиняє виконання головного потоку коду:
console.log('Привіт'); // Виконається негайно
setTimeout(() => {
console.log('світ!'); // Виконається через 2 секунди
}, 2000);
console.log('JavaScript!'); // Виконається негайно
Результат:
Привіт
JavaScript!
//Через 2 с
світ!
Пояснення:
1.console.log('Привіт') виконується негайно.
2.setTimeout реєструє функцію для виконання через 2 секунди, але головний потік продовжує виконувати наступні інструкції.
3. console.log('JavaScript!') виконується негайно після setTimeout.
4. Через 2 секунди викликається колбек-функція із setTimeout, і тоді друкується «світ!».
В JavaScript програма продовжує виконувати інший код, навіть якщо є асинхронна операція, яка ще не завершена. JavaScript працює в однопотоковому середовищі (single-threaded), яке і називаємо головним потоком. Але асинхронні операції, як-от setTimeout, передаються до позациклових механізмів (наприклад, у браузері або Node.js), і основний потік продовжує виконувати інші завдання.
Це одна з ключових особливостей асинхронної моделі JavaScript, і безпосереднє використання setTimeout для пауз може призвести до неочікуваних результатів. Саме тому розглянемо інший метод застосування setTimeout для реалізації sleep() за допомогою функції та промісу.
Використовуємо проміс, setTimeout і async/await
Створюємо паузу
Щоб реалізувати функцію сну, створімо функцію pause(). Вона повертатиме проміс, виконаний за участю вже раніше розглянутої setTimeout:
function pause(ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}
Аргументом функції pause() є період часу в мілісекундах, а виконання промісу затримується за допомогою setTimeout. Такий метод дає змогу призупинити виконання програми на вказаний проміжок часу.
Застосовуємо паузу
Щоб задіяти створену раніше функцію pause(), використаємо синтаксис async/await. Він призупиняє асинхронну функцію, коли та натрапляє на інструкцію await, а коли проміс успішно здійснено або він повертає помилку, виконання коду відновлюється.
async function delayedHello() {
console.log('Привіт');
await pause(2000); // Пауза на 2 с
console.log('світ!');
}
Результат виклику функції delayedHello():
Привіт
//Через 2 с
світ!
Пояснення:
1. Команда console.log('Привіт') виконується негайно і виводить текст «Привіт».
2. await pause(2000) викликає функцію pause(2000), яка повертає проміс. Завдяки await виконання коду асинхронної функції delayedHello() призупиняється, поки проміс функції pause() не буде повернено.
3. Після паузи 2 с виконується наступний рядок коду та в консолі зʼявляється «світ!».
Важливо! Ключове слово await використовують тільки в парі з функцією з префіксом async. Застосування await лише призупиняє поточну функцію асинхронізації та не блокує виконання решти скрипту.
Якщо для наведеного прикладу трохи змінити код і застосувати цикл, то можна вивести на консоль цифри від 1 до 5 із затримкою в 1 с:
function pause(ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}
async function delayedCount() {
for (let i = 1; i <= 5; i++) {
await pause(1000); // Пауза на 1 с
console.log(i);
}
}
delayedCount();
Результат виклику функції delayedCount():
1
//Через 1 с
2
//Через 1 с
3
//Через 1 с
4
//Через 1 с
5
У циклі for програма викликає функцію сну pause() та виводить в консоль цифри від 1 до 5 з інтервалом в 1 с.
Бонус-метод. Вбудована затримка
Якщо потрібно застосувати паузу лише один раз, не зовсім доцільно створювати окрему функцію сну. Існує швидке рішення довжиною буквально в 1 рядок коду:
await new Promise(resolve => setTimeout(resolve, 1000))
Завдяки цьому коду призупиняється виконання асинхронної функції на 1 с. Він може бути корисним для вбудованих затримок, щоб не створювати й не викликати окремі функції для цього.
Висновок
Розглянутий спосіб створення JavaScript-версії функції sleep() можна вважати зручним інструментом для реалізації затримок у вашому коді. Застосування setTimeout у поєднанні з промісами та async/await враховує асинхронну природу JavaScript та робить ваш код більш читабельним і ефективним.
Використовуючи цей спосіб, ви уникнете блокування JavaScript-коду, зберігаючи неблокувальний характер вебзастосунків. Незалежно від того, для чого вам затримка у виконанні коду, розуміння, як реалізувати її на JavaScript, допоможе покращити власний інструментарій розробника.
