事件循环（四）

八. 示例 3:

const p = function () {
  return new Promise((resolve, reject1) => {
    const p1 = new Promise((resolve, reject2) => {
      setTimeout(() => {
        resolve();
      }, 0)
      resolve(2);
    })
    p1.then((res) => {
      console.log(res);
    })
    console.log(3);
    resolve(4);
  })
}
p().then((res) => {
  console.log(res);
})
console.log('end');

// 3
// end
// 2
// 4

开始一顿猛分析

第一轮宏任务

1. 定义 p 函数

2. p().then()

   2.1 执行 p() 函数，函数体内，遇到 new Promise 直接执行其内容

   2.2 定义了 p1 的 Promise

   2.3 执行 p1.then()，遇到 setTimeout，将其加入宏任务队列，因为 p1 方法体内有调用 resolve(2)，所以将 .then() 内容 console.log(res) // 2

   放到微任务队列

   2.4 执行 console.log(3)，打印出 "3"

   2.5 执行 resolve(4)，将 p().then() 里的内容 console.log(res)，放到微任务队列

3. 执行 console.log('end')，打印出 "end"

4. 执行微任务队列的所有微任务，此时微任务队列有：

console.log(res) // 2
console.log(res) // 4

陆续打印出：'2' 和 '4'

第一轮宏任务

此时宏任务队列有：

setTimeout(() => {
    resolve();
}, 0)

执行其内容 resolve()，无打印信息

全部任务执行完成，打印顺序为：

'3'

'end'

'2'

'4'