Как определить порядок вывода console.log в асинхронном коде?

Порядок выполнения в JavaScript не случайный — он строго регламентирован моделью event loop.

Определение

Определение: Event loop — механизм, который управляет очередями задач и определяет, какой код и когда будет выполнен.

Основные участники

Перед анализом любого примера полезно помнить три уровня выполнения:

1. Call stack

   • весь синхронный код

2. Microtask queue

   • Promise.then

   • Promise.catch

   • Promise.finally

   • queueMicrotask

3. Macrotask queue

   • setTimeout

   • setInterval

   • события

   • setImmediate (в Node.js)

Алгоритм определения порядка

Чтобы определить порядок console.log, действуй по шагам:

1. Выпиши весь синхронный код — он выполнится первым.

2. Найди микрозадачи и запомни порядок их постановки.

3. Найди макрозадачи.

4. После завершения синхронного кода:

   • сначала выполняются все микрозадачи,

   • потом одна макрозадача,

   • затем снова микрозадачи и так далее.

Пример с разбором

console.log('A');

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

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

console.log('D');

Разбор:

1. Синхронно:

   • A

   • D

2. Микрозадачи:

   • C

3. Макрозадачи:

   • B

Итоговый вывод:

A
D
C
B

Частые ловушки

• setTimeout(fn, 0) не означает “выполнить сразу”

• микрозадачи могут “задушить” макрозадачи, если их слишком много

• async/await внутри себя тоже использует промисы и микрозадачи

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