Що робить setInterval()?

JavaScriptJunior~1 хв читання

Що робить `setInterval()`

setInterval() - це вбудована функція JavaScript, яка:

запускає періодичний таймер,
кожні delay мілісекунд додає вказаний колбек до черги макротасок,
продовжує робити це доти, доки не буде викликано clearInterval().

Синтаксис

javascript

setInterval(callback, delay, ...args);

Параметри:

callback - функція, яку потрібно викликати повторно;
delay - інтервал між запусками у мілісекундах;
...args - додаткові аргументи, що передаються в колбек.

Приклад

javascript

let count = 0;

const id = setInterval(() => {
  count++;
  console.log(`Минуло ${count} секунд`);

  if (count === 5) {
    clearInterval(id);
    console.log('Таймер зупинено');
  }
}, 1000);

Що станеться:

javascript

Минуло 1 секунд
Минуло 2 секунд
Минуло 3 секунд
Минуло 4 секунд
Минуло 5 секунд
Таймер зупинено

Щосекунди в чергу задач додається нова функція, яка виконується, коли стек порожній.

Що повертає `setInterval()`

Повертає числовий ідентифікатор інтервалу (ID) - той самий тип, що й у setTimeout().

Цей ID використовується, щоб зупинити таймер:

javascript

const intervalId = setInterval(() => console.log('tick'), 1000);

// через 5 секунд зупиняємо
setTimeout(() => clearInterval(intervalId), 5000);

Як це працює під капотом

setInterval() реєструє таймер у зовнішньому API (Web API / Node Timer API).
Кожні delay мс Web API додає колбек у чергу макротасок (Task Queue).
Event Loop виконує колбек, коли стек викликів порожній.
Цикл повторюється, доки не викликано clearInterval().

Важливо знати

1. Інтервал не дорівнює точному часу

setInterval не гарантує, що колбек спрацює рівно через delay мс. Якщо рушій зайнятий (наприклад, виконується важкий код), запуск затримається.

javascript

setInterval(() => console.log('tick'), 1000);
while (true) {} // сторінка "зависне", інтервали не виконаються

2. Можливі накопичення викликів

Якщо колбек займає більше часу, ніж сам інтервал, задачі будуть накопичуватися в черзі:

javascript

setInterval(() => {
  const start = Date.now();
  while (Date.now() - start < 2000) {} // блокуємо потік на 2 сек
  console.log('Виклик');
}, 1000);

Інтервал 1 с, але виконання займає 2 с - колбеки будуть "тіснитися" в черзі й виконуватися один за одним, без пауз.

3. Можна передавати аргументи

javascript

setInterval((a, b) => console.log(a + b), 1000, 2, 3);
// -> Щосекунди виведе 5

Відмінність `setInterval()` від `setTimeout()`

Властивість	`setTimeout()`	`setInterval()`
Запускає	Один раз	Багаторазово
Повторення	Ні	Так
Повертає	ID таймера	ID інтервалу
Скасування	`clearTimeout(id)`	`clearInterval(id)`
Черга	Макротаски	Макротаски
Використовується для	Відкладеного виконання	Задач, що повторюються

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.