Event loop

Event Loop (цикл событий) — это механизм, который позволяет JavaScript выполнять асинхронные операции, несмотря на то, что сам язык является однопоточным. Он отвечает за обработку событий, вызовов колбэков и выполнение задач в правильном порядке.

Основные компоненты Event Loop

1. Call Stack (стек вызовов):
   • Это структура данных, которая отслеживает текущие выполняемые функции.
   • Когда функция вызывается, она добавляется в стек. Когда функция завершается, она удаляется из стека.
   • JavaScript однопоточный, поэтому в один момент времени может выполняться только одна задача.
2. Web APIs (или Browser APIs):
   • Это API, предоставляемые браузером (или средой выполнения, например, Node.js), которые позволяют выполнять асинхронные операции, такие как setTimeout, fetch, XMLHttpRequest, обработка событий (клики, таймеры и т.д.).
   • Когда асинхронная операция запускается, она передается в Web API, и основной поток JavaScript продолжает выполнение.
3. Callback Queue (очередь колбэков):
   • Когда асинхронная операция завершается, ее колбэк помещается в очередь колбэков.
   • Примеры: колбэки из setTimeout, обработчики событий.
4. Microtask Queue (очередь микрозадач):
   • Это отдельная очередь для микрозадач, таких как промисы (Promise) и MutationObserver.
   • Микрозадачи имеют приоритет над задачами из Callback Queue.
5. Event Loop:
   • Это бесконечный цикл, который проверяет, пуст ли Call Stack.
   • Если Call Stack пуст, Event Loop берет задачи из Callback Queue и Microtask Queue и помещает их в Call Stack для выполнения.

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

1. Синхронный код:
   • Весь синхронный код выполняется сразу, попадая в Call Stack.
2. Асинхронный код:
   • Когда встречается асинхронная операция (например, setTimeout или fetch), она передается в Web API, и основной поток продолжает выполнение.
   • После завершения асинхронной операции ее колбэк помещается в Callback Queue (или Microtask Queue, если это промис).
3. Обработка очередей:
   • Когда Call Stack пуст, Event Loop сначала проверяет Microtask Queue.
   • Все микрозадачи (например, колбэки промисов) выполняются до того, как Event Loop перейдет к Callback Queue.
   • После выполнения всех микрозадач Event Loop берет задачи из Callback Queue и помещает их в Call Stack.

Пример работы Event Loop

console.log("Start");

setTimeout(() => {
  console.log("Timeout");
}, 0);

Promise.resolve().then(() => {
  console.log("Promise");
});

console.log("End");

Вывод:

Start
End
Promise
Timeout

Объяснение:

1. Сначала выполняется синхронный код: console.log("Start") и console.log("End").
2. setTimeout передается в Web API, а его колбэк попадает в Callback Queue.
3. Промис сразу резолвится, и его колбэк попадает в Microtask Queue.
4. После завершения синхронного кода Event Loop сначала выполняет микрозадачи (колбэк промиса), а затем переходит к Callback Queue (колбэк setTimeout).

Event Loop позволяет JavaScript эффективно обрабатывать асинхронные операции, несмотря на однопоточность. Он управляет порядком выполнения задач, используя Call Stack, Web APIs, Callback Queue и Microtask Queue. Понимание этого механизма важно для написания эффективного и предсказуемого асинхронного кода.

🚀 Источник: DeepSeek
🚀 Видеоразбор: JavaScript - Event Loop | Асинхронность, Web API, Очереди (макро/микро)задач, Отрисовка кадров