js执行机制对宏任务和微任务的理解

console.log("start");

setTimeout(() => {
  console.log("setTimeout1");
}, 0);

(async function foo() {
  console.log("async 1");

  await asyncFunction();

  console.log("async2");

})().then(console.log("foo.then"));

async function asyncFunction() {
  console.log("asyncFunction");

  setTimeout(() => {
    console.log("setTimeout2");
  }, 0);

  new Promise((res) => {
    console.log("promise1");

    res("promise2");
  }).then(console.log);
}

console.log("end");

提示：

script标签算一个宏任务所以最开始就执行了
async await 在await之后的代码都会被放到微任务队列中去

开始执行：

最开始碰到 console.log("start"); 直接执行并打印出 start
往下走，遇到一个 setTimeout1 就放到宏任务队列
碰到立即执行函数 foo， 打印出 async 1
遇到 await 堵塞队列，先 执行await的函数
执行 asyncFunction 函数， 打印出 asyncFunction
遇到第二个 setTimeout2， 放到宏任务队列
new Promise 立即执行，打印出 promise1
执行到 res("promise2") 函数调用，就是Promise.then。放到微任务队列
asyncFunction函数就执行完毕， 把后面的打印 async2 会放到微任务队列
然后打印出立即执行函数的then方法 foo.then
最后执行打印 end
开始执行微任务的队列 打印出第一个 promise2
然后打印第二个 async2
微任务执行完毕，执行宏任务 打印第一个 setTimeout1
执行第二个宏任务 打印 setTimeout2、
就此，函数执行完毕

image.png

作者：Ali2333
链接：https://juejin.cn/post/7079681931662589960
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。