Как работает event loop в JavaScript?

1️⃣ Как кратко ответить

Event loop в JavaScript — это механизм, который позволяет выполнять неблокирующий ввод-вывод, обрабатывая асинхронные операции. Он работает по принципу: извлечение и выполнение задач из очереди событий, когда стек вызовов пуст.

2️⃣ Подробное объяснение темы

JavaScript — это однопоточный язык программирования, что означает, что в каждый момент времени он может выполнять только одну операцию. Однако, благодаря механизму event loop, JavaScript может обрабатывать асинхронные операции, такие как сетевые запросы, таймеры и события пользовательского интерфейса, без блокировки основного потока выполнения.

Основные компоненты:

1. Call Stack (Стек вызовов): Это структура данных, где хранятся все функции, которые вызываются в процессе выполнения программы. Когда функция вызывается, она добавляется в стек, и когда выполнение функции завершается, она удаляется из стека.

2. Web APIs (Веб-API): Это набор API, предоставляемых браузером (или средой выполнения, такой как Node.js), которые позволяют выполнять асинхронные операции. Например, setTimeout, fetch, и обработчики событий.

3. Callback Queue (Очередь обратных вызовов): Это очередь, в которую помещаются функции обратного вызова, когда асинхронные операции завершаются. Эти функции ожидают своей очереди для выполнения.

4. Event Loop (Цикл событий): Это механизм, который постоянно проверяет стек вызовов и очередь обратных вызовов. Если стек вызовов пуст, event loop извлекает первую функцию из очереди обратных вызовов и помещает её в стек вызовов для выполнения.

Как это работает:

• Когда JavaScript выполняет код, он добавляет функции в стек вызовов.
• Если функция вызывает асинхронную операцию, например, setTimeout, эта операция передается в соответствующий API (например, таймер в случае setTimeout).
• После завершения асинхронной операции, связанная с ней функция обратного вызова помещается в очередь обратных вызовов.
• Event loop постоянно проверяет, пуст ли стек вызовов. Если он пуст, event loop извлекает первую функцию из очереди обратных вызовов и добавляет её в стек вызовов для выполнения.

Пример кода:

console.log('Start');
​
setTimeout(() => {
  console.log('Timeout callback');
}, 1000);
​
console.log('End');

Пояснение к коду:

• console.log('Start'); — Эта строка добавляется в стек вызовов и выполняется сразу, выводя "Start".
• setTimeout(() => { console.log('Timeout callback'); }, 1000); — setTimeout вызывает асинхронную операцию, которая передается в таймер API. Функция обратного вызова будет помещена в очередь обратных вызовов после истечения 1000 миллисекунд.
• console.log('End'); — Эта строка добавляется в стек вызовов и выполняется сразу после предыдущей, выводя "End".
• Через 1000 миллисекунд, когда стек вызовов пуст, event loop извлекает функцию из очереди обратных вызовов и выполняет её, выводя "Timeout callback".

Event loop позволяет JavaScript оставаться отзывчивым и эффективным, обрабатывая асинхронные операции без блокировки основного потока выполнения.