Таймеры и интервалы в JavaScript

В JavaScript существует несколько способов выполнения обычной задачи планирования вызова на более поздний срок. Двумя наиболее часто используемыми методами выполнения кода с определенными интервалами являются:

• setInterval() запускает функцию повторно, начиная с определенного интервала времени и непрерывно повторяя его через этот интервал
• setTimeout() запускает функцию один раз через определенный промежуток времени

setInterval()

Метод setInterval() в интерфейсе Window повторно вызывает функцию или выполняет фрагмент кода с фиксированной временной задержкой между каждым вызовом. Синтаксис следующий:

setInterval(functionRef, milliseconds, arg1, arg2);

Рассмотрим параметры метода:

• functionRef - функция обратного вызова, содержащая блок кода
• milliseconds - временной интервал между выполнением функции (1 секунда = 1000 миллисекунд)
• arg1, arg2 являются необязательными аргументами для функции

Этот метод возвращает interval ID, который идентифицирует этот конкретный интервал, и вы можете удалить его позже, вызвав clearInterval(intervalID).

Пример 1

function displayGreeting() {
    console.log("Привет")
}

// Выводит приветствие каждые 3 секунды
setInterval(displayGreeting, 3000);

Пример 2

// выводит местное время каждую секунду
setInterval(myTimer, 1000);

function myTimer() {
    const date = new Date();
    document.getElementById('time').innerHTML = date.toLocaleTimeString();
}

// new Date() получает текущие дату и время
// toLocaleTimeString() возвращает текущее время

Обратите внимание, что мы передаем функцию в setInterval, но не запускаем ее. Распространенной ошибкой является добавление скобок () после имени функции. Это не сработает, потому что setInterval ожидает ссылку на функцию.

clearInterval

Мы используем clearInterval(intervalID) для отмены интервала.

const intervalID = setInterval(displayGreeting, 3000); 

// можно остановить выполнение вызовом clearInterval()
clearInterval(intervalID)

setTimeout

Чтобы выполнить функцию только один раз, используйте вместо этого метод setTimeout().

setTimeout() - это метод, который устанавливает таймер, который выполняет функцию или указанный фрагмент кода по истечении таймера. Он задерживает выполнение функции обратного вызова.

Мы даем функции setTimeout() два аргумента: функцию обратного вызова и время задержки.

// задержка вывода приветствия на 3 секунды
setTimeout(displayGreeting, 3000);

Вы также можете передать анонимную функцию в setTimeout и setInterval:

setTimeout(() => { alert('Привет!') }, 2000);

Указания по использованию

Вот несколько примеров того, где интервалы (setInterval) могут пригодиться:

• для отображения обратного отсчета по таймеру
• чтобы создать динамический индикатор выполнения
• для переключения между двумя цветами фона
• для создания анимации с пульсирующим эффектом

Вот простой пример реализации таймера:

HTML

 <div id="timer"></div>

JavaScript

const timer = document.getElementById('timer');
let currentTime = 10;

function countDown() {
    currentTime--
    timer.textContent = currentTime

    if (currentTime === 0 ) {
        clearInterval(timerID)
        alert('Игра окончена!')
    }
}

let timerID = setInterval(countDown, 1000)

Функция, вызываемая только один раз после задержки (setTimeout), является обычной задачей, если вы хотите, например, отобразить модальный режим после того, как посетитель просматривал вашу страницу в течение определенного периода времени, или сообщение через несколько секунд после загрузки страницы, или если вы хотите, чтобы короткое время отображалось в режиме реального времени. задержитесь перед удалением эффекта наведения курсора мыши с элемента.

В следующем примере показано сообщение, отображаемое через две секунды после загрузки страницы:

const msg = document.getElementById('msg')

setTimeout(showMsg, 2000)

function showMsg() {
     msg.textContent = 'Привет мир'
}

requestAnimationFrame

Хорошо, мы рассмотрели, как выполнять функцию с определенным интервалом с помощью setInterval(), как очистить интервал с помощью clearInterval(), а также использование setTimeout(), которое мы можем использовать для задержки выполнения функции и запуска ее только один раз. Еще один метод, о котором стоит упомянуть в этой теме, - это метод requestAnimationFrame(), который позволяет выполнять код при перерисовке следующего доступного экрана. Это особенно полезно при использовании JavaScript для анимации и повторных обновлений пользовательского интерфейса. Поскольку это зависит от времени перерисовки в браузере, эффект получается более плавным, чем при использовании функции setInterval().

Например, requestAnimationFrame(myFinction) вызовет myFunction перед следующей перерисовкой. Этот метод возвращает идентификатор, и обратный вызов можно отменить, вызвав cancelAnimationFrame(animationFrameID).

При создании анимации мы должны отдавать предпочтение requestAnimationFrame, а не использованию setTimeout, поскольку он будет срабатывать примерно шестьдесят раз в секунду, в отличие от setTimeout, который вызывается через n миллисекунд. Используя requestAnimationFrame, мы можем избежать повторного изменения чего-либо между двумя обновлениями фрейма и добиться более плавного эффекта, позволяя браузеру выполнять оптимизацию и останавливать анимацию в неактивных вкладках. Подробнее о requestAnimationFrame читайте здесь.