一网打尽 JS async await promise mutate setTimeout microtask macrotask 的执行顺序问题

JS 异步代码执行顺序问题：

async function fn() {
  await new Promise(r => (console.log(1), r())).then(()  => console.log(2))
  setTimeout(() => console.log(9))
  console.log(3)
}
fn()
console.log('u')
Promise.resolve().then(() => console.log(4))
console.log('f')

fn 建栈
1
2 入小队
fn 所在的栈顶弹出（意味着跳出 async fn），但栈顶处的执行上下文并未被销毁，而是保存在堆中的某个地方，我们叫它 fnRest
u
4 入小队
f
到达栈底，出小队
2 出小队
2
fnRest 入队
又到达栈底，再出小队
4 出小队
4
又到达栈底，再出小队
fnRest
9 入大队
3
9 出大队
9

async function fn() {
  await new Promise(resolve => {
    console.log(1)
    setTimeout(resolve)
  }).then(() => console.log(2))
  setTimeout(() => console.log(9))
  console.log(3)
}
fn()
console.log('u')
Promise.resolve().then(() => {
  console.log(4)
})
console.log('f')

fn 建栈
1
r 入大队
fn 所在的栈顶弹出（意味着跳出 async fn），但栈顶处的执行上下文并未被销毁，而是保存在堆中的某个地方，我们叫它 fnRest
u
4 入小队
f
到达栈底
4 出小队
4
到达栈底，小队空
r 出大队
2 入小队
到达栈底
2 出小队
2
fnRest 入小队
到达栈底
fnRest 出小队
9 入大队
3
9 出大队
9

async function bar() {
  async function fn() {
    await new Promise(resolve => {
      console.log(1)
      resolve()
    }).then(() => console.log(2))
    setTimeout(() => console.log(9))
    console.log(3)
  }
  fn()
  console.log('u')
  Promise.resolve().then(() => console.log(4))
  console.log('f')
}

bar().then(() => console.log('t'))

bar 建栈
fn 建栈
1
2 入小队
fn 所在的栈顶弹出（意味着跳出 async fn），但栈顶处的执行上下文并未被销毁，而是保存在堆中，我们称它 fnRest
u
4 入小队
f
bar 所在栈顶弹出
t 入小队
到达栈底
2 出小队
2
fnRest 入小队
到达栈底
4 出小队
4
到达栈底
t 出小队
t
到达栈底
fnRest 出小队
9 入大队
3
fn 所在栈顶弹出
9 出大队
9

最后以一篇强悍的 blog 收尾：Tasks, microtasks, queues and schedules - JakeArchibald.com

除了未涉及 await 之外（那时候还没有），将其他几种异步讲解的异常清晰，还配有动画图示。

In summary:

Tasks execute in order, and the browser may render between them
Microtasks execute in order, and are executed:
- after every callback, as long as no other JavaScript is mid-execution
- at the end of each task

包圆版，两种情况：

inner.click() 触发的执行顺序
user click inner 出发的执行顺序

关键点：

script will own one stack context
mutation observation will not duplicate

<!-- 参考：https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/ -->
<!DOCTYPE html>
<html>

<head>
  <style>
    div {
      display: block;
    }

    .outer-test {
      background: #D4D4D4;
      padding: 25px;
      width: 92px;
      margin: 0 auto;
    }

    .inner-test {
      background: #ADADAD;
      padding: 46px;
      width: 0;
    }
  </style>
</head>

<body>
  <div class="outer-test">
    <div class="inner-test">
    </div>
  </div>
</body>
<script>
  // Let's get hold of those elements
  var outer = document.querySelector('.outer-test');
  var inner = document.querySelector('.inner-test');

  // Let's listen for attribute changes on the
  // outer element
  new MutationObserver(function () {
    console.log('mutate');
  }).observe(outer, {
    attributes: true
  });

  async function foo() {
    await new Promise(resolve => {
      console.log(1)
      resolve()
    }).then(() => console.log(2))
    setTimeout(() => console.log(3))
    console.log(4)
  }

  async function onClick() {
    console.log('click')
    foo()
    Promise.resolve().then(() => console.log(5))
    outer.setAttribute('data-random', Math.random())
  }

  // …which we'll attach to both elements
  inner.addEventListener('click', onClick);
  outer.addEventListener('click', onClick);
  // trigger click using script
  inner.click();
</script>

</html>

xxleyi / learning_list

一网打尽 JS async await promise mutate setTimeout microtask macrotask 的执行顺序问题 #212