setTimeout(fn, 0)

setTimeout(fn, 0) не виконує функцію миттєво: він просто ставить колбек fn у чергу макрозадач, щоб той виконався після завершення поточного коду і всіх мікрозадач. Нульова затримка означає «у наступній ітерації Event Loop», а не «зараз».

#Теорія

#TL;DR

• setTimeout(fn, 0) ставить fn у чергу макрозадач, а не виконує його одразу.
• Колбек чекає, доки звільниться стек викликів, бо Event Loop ніколи не перериває код, що вже виконується.
• Перед ним встигнуть виконатися всі мікрозадачі: Promise.then, queueMicrotask.
• Порядок завжди такий: стек викликів, потім мікрозадачі, потім setTimeout.
• Це стандартний спосіб відкласти роботу, розірвати довгий синхронний блок і дати інтерфейсу оновитися.
• Виклик повертає ID таймера, який можна скасувати через clearTimeout.

#Швидкий приклад

Вивід:

Чому не A, потім B, потім C? Бо колбек таймера не має права втрутитися в код, який уже виконується.

#Що відбувається крок за кроком

1. console.log('A') виконується одразу, у стеку викликів (Call Stack).
2. setTimeout(() => console.log('B'), 0) передає задачу у Web API, це таймер із затримкою 0 мс.
3. Таймер миттєво «спрацьовує», і колбек додається у чергу макрозадач.
4. JavaScript продовжує виконувати поточний стек, тобто друкує C.
5. Коли стек викликів порожній, Event Loop бере задачу () => console.log('B') з черги і виконує її.

#Чому навіть 0 не виконується одразу

Тому що в JavaScript усе проходить через Event Loop, а він ніколи не перериває поточний стек викликів.

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

Тобто setTimeout(fn, 0) це спосіб відкласти виконання функції до наступної ітерації Event Loop.

Варто пам'ятати ще одну деталь: за специфікацією браузери додають мінімальний поріг приблизно 4 мс для вкладених таймерів, тому реальна затримка майже ніколи не дорівнює нулю.

#Приклад із промісом (мікрозадача)

Порядок:

Пояснення:

• Promise.then() створює мікрозадачу;
• setTimeout() створює макрозадачу;
• а мікрозадачі завжди виконуються раніше за макрозадачі.

#Практичне застосування

1. Відкласти виконання, щоб не блокувати основний код:

   javascript

   Copy

   setTimeout(() => { console.log('Виконається після основного коду'); }, 0);

2. Розірвати синхронний цикл, щоб інтерфейс встиг оновитися:

   javascript

   Copy

   for (let i = 0; i < 1e9; i++) {} // важка операція console.log('Інтерфейс підвис...'); setTimeout(() => { console.log('Тепер виконуємося після паузи'); }, 0);

3. Скинути стек, наприклад у рекурсивних обчисленнях:

   javascript

   Copy

   function nextStep() { setTimeout(nextStep, 0); // кожне повторення це нова ітерація Event Loop } nextStep();

#Підсумок

Візуально це виглядає так:

setTimeout(fn, 0) завжди чекає, поки:

1. очиститься стек викликів,
2. виконаються мікрозадачі,
3. і лише потім виконується fn.

#Типові помилки

• Думати, що 0 означає «негайно». Це означає «якнайшвидше після звільнення стека», різниця критична, коли поруч є важкий синхронний код.
• Ставити setTimeout(fn, 0) в один ряд із Promise.resolve().then(fn). Проміс це мікрозадача, вона завжди випередить таймер.
• Розраховувати на рівно 0 мс. Браузери застосовують мінімальний поріг близько 4 мс для вкладених таймерів, а у фоновій вкладці затримки ще більші.
• Лікувати нульовим таймером зависання інтерфейсу. Він лише дає браузеру шанс перемалювати екран між шматками роботи; якщо сама робота важка, її треба розбити на частини або винести у Web Worker.
• Забувати про clearTimeout. Відкладений колбек може спрацювати вже після того, як компонент знято з екрана, і звернутися до неактуальних даних.