yh-1850

Что такое Event Loop?

Event Loop — это ключевой механизм в JavaScript, который обеспечивает асинхронное выполнение кода в однопоточной среде. Он работает как бесконечный цикл, который следит за Call Stack (стеком вызовов) и очередями задач. Когда стек пуст, Event Loop берет первую задачу из очереди и помещает ее в стек для выполнения.

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

JavaScript имеет несколько очередей: очередь microtask (например, Promise.then, MutationObserver) и очередь macrotask (setTimeout, setInterval, I/O). Microtask имеют приоритет перед macrotask. После выполнения каждого макрозадания Event Loop сначала обрабатывает все microtask, прежде чем перейти к следующему макрозаданию.

Пример кода

console.log('1'); // синхронно

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

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

console.log('4'); // синхронно

// Вывод: 1, 4, 3, 2

В этом примере сначала выполняются синхронные console.log('1') и console.log('4'). Затем Event Loop обрабатывает microtask (Promise) и выводит '3'. И только потом — macrotask (setTimeout) с '2'. Это демонстрирует приоритет microtask.

Где применяется?

Понимание Event Loop критично для работы с асинхронными запросами (fetch, AJAX), таймерами, обработкой событий и любыми Promise-цепочками. Без этого знания легко допустить ошибки с порядком выполнения кода.

Вывод

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