Коротка відповідь
middleEvent loop — це механізм, що обробляє асинхронні операції в JavaScript‑руші. Він чергує макрозадачі (setTimeout, I/O) і мікрозадачі (Promise.resolve), виконуючи всі мікрозадачі перед наступною макрозадачею. При завершенні циклу обробки стеку виконується callback‑функція. ```js Promise.resolve().then(()=>console.log('micro')); setTimeout(()=>console.log('macro'),0); ```
Повне пояснення
Що це і навіщо Event loop — внутрішній цикл, що забезпечує неблокуючий I/O в JavaScript‑руші. Він дозволяє виконувати асинхронні операції без блокування головного потоку.
Ключові принципи/терміни
- Macro-task queue – черга макрозадач (setTimeout, setInterval, I/O callbacks).
- Micro-task queue – черга мікрозадач (Promise handlers, process.nextTick, MutationObserver).
- Execution stack – стек викликів.
Як це працює
- Стек викликів очищується.
- Якщо мікрозадачі в черзі, вони виконуються послідовно.
- Після порожнього мікрозадачного черги, береться наступна макрозадача.
- Повторюється крок 1.
Практика і реалізація (JS/TS)
async function fetchData() {
const data = await fetch('/api'); // Promise → micro-task
console.log(data);
}
setTimeout(fetchData, 0); // macro-task
Тестування
- Jest/Vitest:
await Promise.resolve();перевіряє, що мікрозадачі виконуються. - Playwright:
page.waitForTimeout(0)демонструє макрозадачу.
Дизайн‑рішення
- Використання
queueMicrotaskзамістьsetTimeout(fn,0)для швидших мікрозадач. - У NestJS
async/awaitавтоматично розміщує обробку у мікрозадачі.
Оптимізація та edge cases
- Надмірна кількість мікрозадач може блокувати макрозадачі → розбивайте логіку.
setImmediate(Node.js) – альтернативна макрозадача після мікрозадач.
Часті помилки
- Очікування
Promise.resolve()безawait→ мікрозадача не завершується. - Використання
setTimeout(fn,0)замість мікрозадачі → зайве затримання.
Cheatsheet
Promise.resolve().then(fn)→ мікрозадача.setTimeout(fn,0)→ макрозадача.queueMicrotask(fn)→ мікрозадача (Node.js, браузер).