为什么JavaScript的Event Loop运行结果与预期不一致？

你给出的代码如下：

setTimeout(() => {
  console.log(`1 work is done`);
  
  setTimeout(() => {
    console.log(`2 work is done`);
  }, 3000);
  
  setTimeout(() => {
    console.log(`3 work is done`);
  }, 1000);
}, 5000);

实际执行流程拆解 #

• 代码初始运行时，首先注册最外层的setTimeout，设定延迟为5000ms，主线程等待定时器触发条件满足
• 5000ms到期后，外层setTimeout的回调函数进入执行栈运行：
  1. 首先同步执行console.log(1 work is done)，第一个输出内容为1
  2. 同步注册第一个内层setTimeout，设定3000ms延迟，触发后打印2
  3. 同步注册第二个内层setTimeout，设定1000ms延迟，触发后打印3
• 两个内层定时器从注册完成的同一时间点开始计时：
  1. 1000ms后，打印3的定时器到期，回调执行，第二个输出内容为3
  2. 3000ms后，打印2的定时器到期，回调执行，第三个输出内容为2

你预期的3->2->1顺序错误，核心原因是混淆了定时器的嵌套逻辑：打印1的语句是外层定时器回调内的同步执行代码，会比所有内层定时器的回调执行时间更早，不存在和内层定时器按延迟时长排序的关系。

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