Event Loop в JavaScript: как это работает на самом деле

JavaScript часто называют однопоточным, и это правда лишь частично. Сам язык выполняет код в одном основном потоке, но за асинхронность отвечают браузер или Node.js: они передают задачи в окружение, а затем возвращают их в очередь выполнения. Именно здесь и вступает в игру Event Loop.

Что такое Event Loop

Это механизм, который следит:

• свободен ли стек вызовов (Call Stack)
• есть ли задачи в очередях
• какую задачу выполнить следующей

Проще говоря, Event Loop — это “диспетчер”, который координирует выполнение синхронного и асинхронного кода 🔄

Из чего всё состоит

• Call Stack — стек вызовов, где выполняются функции
• Web APIs / Node APIs — таймеры, сетевые запросы, DOM-события, файловые операции
• Callback Queue (macrotasks) — очередь колбэков setTimeout, setInterval, событий
• Microtask Queue — очередь Promise.then, catch, finally, queueMicrotask

Как работает цикл событий

1. Синхронный код попадает в Call Stack и выполняется сразу
2. Асинхронные операции передаются во внешнюю среду
3. Когда операция завершена, её колбэк попадает в очередь
4. Event Loop проверяет: если стек пуст, он сначала выполняет microtasks, потом macrotasks

Главное правило: microtasks всегда имеют приоритет перед macrotasks ⚡️

Пример:

console.log('1');

setTimeout(() => console.log('2'), 0);

Promise.resolve().then(() => console.log('3'));

console.log('4');

Результат:

1
4
3
2

Почему так:

• 1 и 4 — синхронно
• Promise.then идёт в Microtask Queue
• setTimeout идёт в Macrotask Queue
• после завершения основного кода сначала выполняется 3, потом 2

Почему setTimeout(..., 0) не значит “мгновенно”

Многие думают, что нулевая задержка запускает код сразу. На деле это означает: выполни не раньше, чем освободится стек и дойдёт очередь до macrotask. Поэтому даже 0 ms не гарантирует немедленный запуск ⏱️

Частые ошибки в понимании Event Loop

• Считать, что асинхронный код “идёт параллельно” внутри самого JS
• Игнорировать приоритет microtasks
• Не учитывать, что длинный синхронный код блокирует интерфейс и все очереди
• Путать поведение браузера и Node.js, где есть особенности фаз цикла событий

Почему это важно на практике

Понимание Event Loop помогает:

• объяснять порядок выполнения кода на собеседованиях
• избегать “зависаний” UI
• правильно работать с Promise, async/await, таймерами
• находить баги, связанные с неожиданным порядком выполнения 🧠

Короткий вывод

Event Loop — это не магия, а чёткий механизм планирования задач.
Сначала выполняется синхронный код, затем microtasks, потом macrotasks. Если понять этот принцип, асинхронность в JavaScript становится намного предсказуемее и проще в отладке 🚀

👉 В конце дня особенно полезно заглянуть в подборку каналов про IT — там часто публикуют практику, разборы и свежие инсайты по JavaScript и не только.

🗣 Подборки каналов
🧠 Каталог ботов и приложений
🗺 Навигация