setTimeout і setInterval в JavaScript

Таймери в JavaScript

setTimeout та setInterval — це функції Web API для виконання коду після затримки або з регулярними інтервалами.

setTimeout

Виконує функцію один раз після вказаної затримки (в мілісекундах):

javascript

const timerId = setTimeout(() => {
  console.log("Виконується через 2 секунди");
}, 2000);

// Скасувати перед виконанням
clearTimeout(timerId);

setTimeout з 0 затримкою

javascript

console.log("1");
setTimeout(() => console.log("2"), 0);
console.log("3");
// Вихід: 1, 3, 2

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

setInterval

Виконує функцію неодноразово через кожен заданий інтервал:

javascript

let count = 0;
const intervalId = setInterval(() => {
  count++;
  console.log(`Тик: ${count}`);
  
  if (count >= 5) {
    clearInterval(intervalId); // Зупинити після 5 тиков
  }
}, 1000);

setTimeout проти setInterval

Особливість	setTimeout	setInterval
Виконує	Один раз	Неодноразово
Скасувати	`clearTimeout(id)`	`clearInterval(id)`
Відхилення	Немає накопичення	Може відхилятися з часом
Гарантія	Мінімальна затримка, не точна	Може перекриватися, якщо зворотний виклик повільний

Рекурсивний setTimeout (Краща альтернатива setInterval)

javascript

// ✅ Гарантує затримку МІЖ виконаннями
function poll() {
  fetch("/api/status")
    .then(res => res.json())
    .then(data => {
      updateUI(data);
      setTimeout(poll, 5000); // Наступний запит після завершення поточного
    });
}
poll();

// ❌ setInterval не чекає на асинхронну операцію
setInterval(async () => {
  const data = await fetch("/api/status"); // Може перекриватися!
}, 5000);

Загальні шаблони

Дебаунс з setTimeout

javascript

let timeout;
input.addEventListener("input", () => {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    search(input.value);
  }, 300);
});

Таймер зворотного відліку

javascript

function countdown(seconds) {
  const id = setInterval(() => {
    console.log(seconds);
    seconds--;
    if (seconds < 0) {
      clearInterval(id);
      console.log("Готово!");
    }
  }, 1000);
}
countdown(5);

Важливі нюанси

Контекст this

javascript

const obj = {
  name: "Таймер",
  start() {
    // ❌ Втрачає 'this'
    setTimeout(function() {
      console.log(this.name); // undefined
    }, 1000);

    // ✅ Стрілкова функція зберігає 'this'
    setTimeout(() => {
      console.log(this.name); // "Таймер"
    }, 1000);
  }
};

Мінімальна затримка

Браузери забезпечують мінімальну затримку ~4мс для вкладених таймерів (після 5 вкладених викликів). Це зазначено в специфікації HTML.

Важливо:

Завжди скасовуйте таймери, коли компоненти демонтуються (наприклад, у очищенні useEffect в React), щоб запобігти витокам пам'яті. Віддавайте перевагу рекурсивному setTimeout над setInterval для асинхронних операцій. Пам'ятайте: затримка таймера є мінімальною, а не гарантією.

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

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

Premium

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

Дочитали статтю?

Практика завдань