69 lines
5.2 KiB
Markdown
69 lines
5.2 KiB
Markdown
---
|
||
sidebar_position: 7
|
||
---
|
||
|
||
# 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
|
||
```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. Понимание этого механизма важно для написания эффективного и предсказуемого асинхронного кода.
|
||
|
||
🚀 **Источник: DeepSeek** \
|
||
🚀 Видеоразбор: [JavaScript - Event Loop | Асинхронность, Web API, Очереди (макро/микро)задач, Отрисовка кадров](https://www.youtube.com/watch?v=YTLXrji4DJc)
|