记录一下微任务与宏任务的嵌套

微任务宏任务嵌套执行

• 微任务套宏任务还是简单的,注意一下
• 执行先后 -> 先同步,后微任务,后宏任务
• 分层推理 -> 注意每执行一层添加了多少微任务宏任务
• 添加先后 -> 添加是放在队尾,就是队列执行的特性,先进先出

---

微任务嵌套(例)

console.log('satrt')

Promise.resolve().then(() => {
  console.log('A1')
  Promise.resolve()
    .then(() => {
      console.log('A2-1')
    })
    .then(() => {
      console.log('A2-2')
    })
})

Promise.resolve()
  .then(() => {
    console.log('B1-1')
    setTimeout(() => {
      console.log('B2')
    }, 0)
  })
  .then(() => {
    console.log('B1-2')
  })

setTimeout(() => {
  console.log('C1')
  Promise.resolve().then(() => {
    console.log('C2')
  })
}, 0)

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

console.log('end')

执行结果

satrt
end
A1
B1 - 1
B1 - 2
A1 - 1
A1 - 2
C1
C2
D1
B2
D2

MD,错了

satrt
end
A1
B1 - 1
A2 - 1
B1 - 2
A2 - 2
C1
C2
D1
B2
D2

• 嗐,Promise在 then 完会返回一个 Promise,所以要把 then 的过程看作又添加了一个微任务到队列中
• 所以 B1-1 后添加了一个 B1-2 再去执行 A2-1 的任务 又添加了一个 A2-2 的任务
• 后又执行 B1-2 A2-2
• 所以是 B1-1 A2-1 B1-2 A2-2

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

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

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

像这样

A1 - 1
A2 - 1
A3 - 1
A1 - 2
A2 - 2
A3 - 2
A1 - 3
A2 - 3
A3 - 3