JavaScript setInterval() — повторювати код через рівні проміжки

Метод setInterval() виконує функцію знову й знову, через заданий проміжок у мілісекундах.

правити

Загальний опис

Виглядає зручно, але має підступну ваду: інтервал не чекає на завершення попереднього виклику. Якщо функція виконується довше за проміжок, виклики почнуть накопичуватись і накладатись один на одного.

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

Для анімацій його не беруть узагалі — там є requestAnimationFrame, синхронізований із частотою екрана.

правити

Нотатка

Інтервал працює вічно, доки його не скасують. Забутий setInterval — класичний витік: сторінка давно змінилась, а він усе тікає в фоні.

автор: NagarD правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	4	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	0.10.0*	1.0

Приклади

+ запропонувати свій приклад у пісочниці

let seconds = 0;

const id = setInterval(() => {
    seconds++;
    console.log(seconds);

    if (seconds === 5) {
        clearInterval(id); // інакше тікатиме вічно
    }
}, 1000);

// для запитів надійніше так: наступний — ПІСЛЯ попереднього
async function poll() {
    await fetch('/api/status');
    setTimeout(poll, 5000);
}