События синхронизации 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); }