Події синхронізації JavaScript: setTimeout і setInterval

Програмісти використовують події синхронізації для затримки виконання певного коду або для повторення коду через певний інтервал.

Для виконання цих завдань у бібліотеці JavaScript є дві власні функції: setTimeout()і setInterval().

setTimeout

setTimeout() використовується для затримки виконання переданої функції на заданий проміжок часу.

Ви передаєте два параметри setTimeout(): функцію, яку ви хочете викликати, і кількість часу в мілісекундах для затримки виконання функції.

Пам'ятайте, що за 1 секунду буває 1000 мілісекунд (мс), тому 5000 мс дорівнює 5 секундам.

setTimeout() виконуватиме функцію з першого аргументу один раз після закінчення зазначеного часу.

Приклад:

let timeoutID; function delayTimer() { timeoutID = setTimeout(delayedFunction, 3000); } function delayedFunction() { alert(“Three seconds have elapsed.”); }

Коли delayTimerфункцію викликано, вона буде працювати setTimeout. Після проходження 3 секунд (3000 мс) він виконає програму, delayedFunctionяка надішле попередження.

setInterval

Використовуйте setInterval()для вказівки функції для повторення із затримкою між виконанням.

Знову ж передаються два параметри setInterval(): функція, яку потрібно викликати, і кількість часу в мілісекундах для затримки кожного виклику функції.

setInterval() буде продовжувати виконуватися, доки не буде очищено.

Приклад:

let intervalID; function repeatEverySecond() { intervalID = setInterval(sendMessage, 1000); } function sendMessage() { console.log(“One second elapsed.”); }

Коли ваш код викликає функцію, repeatEverySecondвін буде запускатися setInterval. setIntervalбуде запускати функцію sendMessageщосекунди (1000 мс).

clearTimeout і clearInterval

Існують також відповідні власні функції для зупинки подій синхронізації: clearTimeout()і clearInterval().

Можливо, ви помітили, що кожна функція таймера, яка вказана вище, зберігається у змінній. Коли функція setTimeoutабо setIntervalзапускається, їй присвоюється номер, який зберігається до цієї змінної. Зверніть увагу, що JavaScript робить це все у фоновому режимі.

Це згенероване число є унікальним для кожного екземпляра таймерів. Цей призначений номер також визначає таймери, коли ви хочете їх зупинити. З цієї причини ви завжди повинні встановлювати для таймера змінну.

Для ясності коду, ви завжди повинні відповідати , clearTimeout()щоб setTimeout()і clearInterval()в setInterval().

Щоб зупинити таймер, викличте відповідну функцію очищення та передайте йому змінну ідентифікатора таймера, яка відповідає таймеру, який ви хочете зупинити. Синтаксис для clearInterval()і clearTimeout()є однаковим.

Приклад:

let timeoutID; function delayTimer() { timeoutID = setTimeout(delayedFunction, 3000); } function delayedFunction() { alert(“Three seconds have elapsed.”); } function clearAlert() { clearTimeout(timeoutID); }