Как микрозадача внутри таймера меняет порядок вывода?

Условие

В браузере выполните:

setTimeout(() => {
  console.log(1);
  Promise.resolve().then(() => console.log(2));
}, 0);
setTimeout(() => console.log(3), 0);
Promise.resolve().then(() => console.log(4));
console.log(5);

Все таймеры ставятся в одном скрипте. Каков порядок?

Ответ

Порядок: 5, 4, 1, 2, 3. Микрозадача 2 выполняется после завершения первого таймера, прежде чем начнётся обработчик второго таймера.

Первоначальный синхронный код печатает 5. Затем обрабатывается уже поставленная реакция Promise с 4. Первый таймер печатает 1 и добавляет новую микрозадачу; после возврата его обработчика она печатает 2. Только после этого выполняется второй таймер с 3. Нельзя один раз «выгрузить все Promise», а затем все таймеры: новые микрозадачи появляются во время работы.

Источник: html.spec.whatwg.org.