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

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

правити

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

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

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

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

правити

Нотатка

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

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

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

Переглядачі

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

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

Переглядач
setInterval	1+	1+	1+	3+	12+	5+

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

Переглядач
setInterval	yes	yes	yes	yes

Приклади

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

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);
}