Почему Promise выполняется раньше setTimeout?

Как работает Event Loop

JavaScript использует event loop для управления асинхронными операциями. В основе лежит цикл, который последовательно обрабатывает задачи из очередей. Существует два типа очередей: очередь микрозадач (microtask queue) и очередь макрозадач (macrotask queue).

Микрозадачи и макрозадачи

Микрозадачи включают Promise.then/catch/finally, MutationObserver и queueMicrotask. Макрозадачи включают setTimeout, setInterval, I/O операции и события DOM. Event loop сначала выполняет одну макрозадачу, затем очищает всю очередь микрозадач, прежде чем взять следующую макрозадачу.

Пример кода

console.log('Start');

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

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

console.log('End');
// Вывод: Start, End, Promise, setTimeout

В этом примере сначала выполняется синхронный код (Start, End). Затем event loop проверяет очередь микрозадач и выполняет Promise. Только после этого он берет следующую макрозадачу — setTimeout.

Практическое применение

Понимание этого механизма важно для предотвращения неожиданного порядка выполнения кода. Например, если нужно гарантировать выполнение определенного кода после всех Promise, следует использовать setTimeout с нулевой задержкой, но помнить, что он выполнится после всех микрозадач.

Вывод: Promise выполняется раньше setTimeout из-за приоритета микрозадач над макрозадачами в event loop. Это знание помогает правильно управлять асинхронными операциями и избегать ошибок, связанных с порядком выполнения кода.