🤔 Что если микрозадача создаст еще микрозадачу?

Когда микрозадача (microtask) создаёт другую микрозадачу, обе задачи будут выполнены в том же цикле событий (event loop), прежде чем будет обработано следующее макрозадача (macrotask).

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

🟠Макрозадачи (macrotasks)
Например, обработчики событий, setTimeout, setInterval.
🟠Микрозадачи (microtasks)
Например, Promises, MutationObserver, process.nextTick (в Node.js).

🚩Последовательность выполнения

1⃣Выполняется макрозадача.
2⃣Обрабатываются все микрозадачи, пока очередь микрозадач не станет пустой.
3⃣Переход к следующей макрозадаче.

console.log('Start');

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

Promise.resolve()
  .then(() => {
    console.log('Microtask 1');
    Promise.resolve().then(() => {
      console.log('Microtask 2');
    });
  })
  .then(() => {
    console.log('Microtask 3');
  });

console.log('End');

🚩Ожидаемый результат

console.log('Start')
Выполняется сразу.
console.log('End')
Выполняется сразу после первого console.log.
Очередь макрозадач ставит функцию из setTimeout.
Очередь микрозадач добавляет первую микрозадачу из Promise.resolve().then(...).

Вывод в консоли

Start
End
Microtask 1
Microtask 2
Microtask 3
Macrotask: setTimeout

Ставь 👍 и забирай 📚 Базу знаний