以下语句会如何输出？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
console.log('start')

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

new Promise((resolve) => {
  console.log('promise')
  resolve()
})
  .then(() => {
    console.log('then1')
  })
  .then(() => {
    console.log('then2')
  })

console.log('end')

结果：打印 start promise end then1 then2 setTimeout

原因：简单来说，JS 代码的执行顺序为：同步代码–>异步代码（微任务–>宏任务）

分析：

  1. 打印 start

  2. setTimeout 加入消息队列

  3. new Promise 的同步部分执行，打印 promise，then 部分加入消息队列

  4. 打印 end

  5. 消息队列中先处理微任务 then 的部分，打印 then1，then2

  6. 消息队列处理宏任务 setTimeout，打印 setTimeout

参考资料

并发模型与事件循环

深入理解 js 事件循环机制（浏览器篇）