JavaScript微任务与宏任务执行顺序困惑及代码问题咨询

问题代码 #

console.log("start");

const promise1 = Promise.resolve().then(() => {
  console.log("promise1");
  const timer2 = setTimeout(() => {
    console.log("timer2");
  }, 0);
});

const timer1 = setTimeout(() => {
  console.log("timer1");
  const promise2 = Promise.resolve().then(() => {
    console.log("promise2");
  });
}, 0);

console.log("end");

正确执行顺序 #

start, end, promise1, timer1, promise2, timer2

核心规则与执行流程拆解 #

JavaScript任务执行遵循以下核心逻辑：

• 同步代码优先执行，执行完毕后清空所有微任务队列
• 每执行完一个宏任务，会先清空当前所有微任务，再执行下一个宏任务
• 同类型任务（如都是setTimeout宏任务）遵循先进先出的入队顺序

具体执行步骤：

1. 同步代码阶段

   • 打印start
   • Promise.resolve()立即将promise1的then回调加入微任务队列
   • 调用setTimeout(timer1)，将timer1的回调加入宏任务队列
   • 打印end
   • 此时微任务队列：[promise1的then回调]；宏任务队列：[timer1的回调]

2. 清空微任务队列

   • 执行promise1的then回调：打印promise1，随后调用setTimeout(timer2)，将timer2的回调加入宏任务队列（宏任务队列变为[timer1的回调, timer2的回调]）
   • 微任务队列清空

3. 执行第一个宏任务（timer1回调）

   • 打印timer1，随后Promise.resolve()将promise2的then回调加入微任务队列
   • 当前宏任务执行完毕，立即清空微任务队列：执行promise2的then回调，打印promise2

4. 执行下一个宏任务（timer2回调）

   • 打印timer2

疑问解答 #

• 为什么timer2未被优先处理？
  不是timer2优先级低，而是它的入队时间晚于timer1。timer1在同步代码阶段就被加入宏任务队列，而timer2是在微任务执行过程中才被加入的，宏任务队列遵循先进先出，所以timer1先执行。

• “全局任务优先”是否成立？
  这个说法不成立。不存在所谓“全局任务”的特殊优先级，所有任务的执行顺序只由任务类型（微任务>宏任务）和入队顺序决定。

内容的提问来源于stack exchange，提问作者Roma Kim