Для чого призначені методи setTimeout і setInterval?

Повне пояснення

JS Core

1. Суть і призначення – обидва методи належать глобальному об’єкту window (в браузері) або global (Node.js). Вони дозволяють відкладати виконання коду, що корисно для таймерів, анімацій, повторних запитів і розкладки задач.

2. Ключові принципи –

   • setTimeout(callback, delay) повертає ідентифікатор таймера.
   • setInterval(callback, delay) повертає ідентифікатор інтервалу.
   • Обидва викликають callback у event loop після завершення поточного стеку.
   • Якщо delay <= 0, виклик відбудеться після поточного циклу.

3. Як це працює –

   • При виклику setTimeout створюється запис у черзі таймерів.
   • Коли delay мине, callback ставиться у чергу виконання.
   • Для setInterval після кожного виклику callback записується знову, доки не буде clearInterval.

4. Практика –

   const id = setTimeout(() => console.log('one shot'), 1000);
   clearTimeout(id); // скасовує, якщо треба
   

   const interval = setInterval(() => console.log('tick'), 500);
   // після 5s
   setTimeout(() => clearInterval(interval), 5000);
   

5. Тестування –

   • Використовувати jest.useFakeTimers().

   jest.useFakeTimers();
   const fn = jest.fn();
   setTimeout(fn, 100);
   jest.advanceTimersByTime(99); expect(fn).not.toBeCalled();
   jest.advanceTimersByTime(1);  expect(fn).toBeCalled();
   

6. Дизайн і моделі даних – не застосовуємо.

7. Продуктивність –

   • Внутрішня реалізація залежить від V8/Node.
   • setInterval може «залипнути», якщо callback триває довше, ніж delay.

8. Безпека –

   • Неправильне використання може призвести до утримання пам’яті через незакриті таймери.

9. Контекст у JS Core –

   • У браузері доступно через window.
   • У Node.js – через глобальний об’єкт.

10. Edge cases і типові помилки –

• Симптом: callback не виконується. Причина: clearTimeout/clearInterval передався, або функція не була оголошена. Рішення: перевірити ID.
• Симптом: callback виконується частіше, ніж очікувалося. Причина: setInterval з коротким delay і довгим callback. Рішення: використати рекурсивний setTimeout.
• Симптом: таймер «залип» після перезапуску. Причина: clearInterval не викликано. Рішення: гарантувати очищення.
• Симптом: delay > 2^31-1. Причина: обмеження JavaScript Number. Рішення: розбити на декілька таймерів.
• Симптом: callback виконується після window.close(). Причина: таймер живий у фоновому процесі. Рішення: очищати в beforeunload.
• Симптом: callback отримує неправильний контекст. Причина: this не прив’язаний. Рішення: використовувати arrow-функцію.
• Симптом: таймер не працює в Web Worker. Причина: setTimeout/setInterval недоступні без self. Рішення: використати postMessage.
• Симптом: таймер не працює в Node.js без setImmediate. Причина: event loop blocked. Рішення: розбити на малі частини.

11. Оптимізація і best practices –

• Використовувати setTimeout замість setInterval, коли потрібна однакова затримка між викликами.
• Завжди очищати таймери у useEffect/componentWillUnmount.
• Не передавати великі об’єкти у callback, щоб уникнути копіювання.

12. Альтернативи й порівняння –

• requestAnimationFrame для анімацій, бо синхронізується з перерисовкою.
• setImmediate у Node.js для негайного виконання після поточного циклу.

13. Cheatsheet + follow-up питання –

• Q: Чому setInterval може «залипнути»? A: Якщо callback триває довше delay, наступний виклик відкладений.
• Q: Як скасувати таймер? A: clearTimeout(id) або clearInterval(id).
• Q: Чи можна використовувати setTimeout у Web Worker? A: Так, через self.setTimeout.
• Q: Що відбувається при delay = 0? A: Callback ставиться у чергу після поточного стеку.
• Q: Як тестувати таймери в Jest? A: jest.useFakeTimers() і jest.advanceTimersByTime.

14. Діагностика –

• Симптом: callback не виконується → Перевірити ID, чи не очищено.
• Симптом: callback виконується занадто часто → Перевірити delay і тривалість callback.
• Симптом: пам’ять не звільняється → Перевірити, чи є незакриті таймери після компоненту.