Цикл событий — основа асинхронной работы JavaScript. Он управляет выполнением кода, обработкой событий и взаимодействием с внешним миром.
Основные компоненты:
- Куча (Heap): Область памяти для выделения объектов.
- Стек (Stack): Место, где хранятся контексты выполнения функций. При вызове функция помещается в стек, при завершении — удаляется.
- Web APIS: Интерфейсы, предоставляемые браузером (DOM, AJAX, Timers и т.д.). Они обрабатывают асинхронные операции.
- Очередь колбэков (Callback Queue): Очередь сообщений, связанных с событиями. Web APIs помещают колбэки завершенных асинхронных операций сюда.
- Цикл событий (Event Loop): Постоянно мониторит стек и очередь колбэков. Если стек пуст, он берет первый колбэк из очереди и помещает его в стек для выполнения.
Процесс:
- Синхронный код выполняется в стеке.
- Асинхронные операции (например,
setTimeout, fetch) передаются в Web APIs.
- Когда асинхронная операция завершена, ее колбэк помещается в очередь колбэков.
- Цикл событий ждет, пока стек станет пустым.
- Когда стек пуст, цикл событий берет первый колбэк из очереди и помещает его в стек, где он выполняется.
Пример с setTimeout:
javascript
Вывод будет:
plaintext
Несмотря на таймаут в 0 мс, колбэк setTimeout выполняется после синхронного кода, потому что он попадает в очередь и ждет опустошения стека.
В Node.js цикл событий также существует, но с некоторыми отличиями в фазах обработки очередей.