---
sidebar_position: 7
---

# Event loop
Источник: DeepSeek \
Видеоразбор: [JavaScript - Event Loop | Асинхронность, Web API, Очереди (макро/микро)задач, Отрисовка кадров](https://www.youtube.com/watch?v=YTLXrji4DJc)

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
```js
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. Понимание этого механизма важно для написания эффективного и предсказуемого асинхронного кода.