Как работает Event Loop

Event Loop — это механизм, который позволяет JavaScript выполнять асинхронный код, несмотря на однопоточность. Он состоит из нескольких частей: Call Stack, Web APIs, Callback Queue и Microtask Queue.

1. Call Stack — выполняет синхронный код. Если встречается асинхронная операция (например, setTimeout или fetch), она передаётся в Web APIs.
2. Web APIs — обрабатывают асинхронные операции (таймеры, HTTP-запросы). После завершения колбэки попадают в Callback Queue (макрозадачи) или Microtask Queue (микрозадачи, например, Promise.then).
3. Event Loop проверяет Call Stack. Если он пуст, сначала выполняет все микрозадачи из Microtask Queue, затем одну макрозадачу из Callback Queue.

Пример:

console.log('Start');

setTimeout(() => console.log('Timeout'), 0);

Promise.resolve().then(() => console.log('Promise'));

console.log('End');

Вывод:

Start
End
Promise
Timeout