3-js程序执行顺序判断

本文最后更新于:2021年2月15日 晚上

某2020前端互助群的每周议题(二)

参考学习资料:

《ECMAScript 6 入门》Promise

《ECMAScript 6 入门》async

本次议题总结

题目:

async function async1 () {
    console.log(1);
    await async2();
    console.log(2);
    return await 3
}
 
async function async2 () {
    console.log(4);
}
 
setTimeout(function () {
    console.log(5);
}, 0);
 
async1().then(v=> console.log(v))
 
new Promise(function (resolve) {
    console.log(6);
    resolve();
    console.log(7)
}).then(function () {
    console.log(8);
});
 
console.log(9);

我的思路:

按照正常顺序,首先遇到的是宏任务setTimeout(),将其加入宏任务队列(稍后执行)
代码继续运行,进入函数async1(),直接输出1,

1

执行函数async2(),直接输出4

1 4

然后遇到了微任务await async2(),将其加入微任务队列(稍后执行),await async2()后的代码将被阻塞直到该微任务执行完

接着进入Promise(),直接输出6。

1 4 6

然后遇到了resolve(),将其加入微任务队列,接着是输出7

1 4 6 7

代码继续执行,直接输出9

1 4 6 7 9

至此代码已经执行到末尾了,开始执行微任务队列中的任务。
根据队列 先进先出 的特点,可以知道先执行await async2(),直接输出4,微任务完成

1 4 6 7 9

接着执行之前之前被阻塞的部分,直接输出2,然后遇到微任务await 3,将其加入微任务队列,后续代码进入阻塞状态

1 4 6 7 9 2

从微任务队列中取出前面加入的resolve(),执行后进入.then(),直接输出8,微任务完成

1 4 6 7 9 2 8

从微任务队列中取出剩下的微任务await 3, 微任务完成。返回值为3,然后进入.then(),输出3

1 4 6 7 9 2 8 3

所有微任务都执行完后,就剩下宏任务setTimeout了,执行任务,输出5

1 4 6 7 9 2 8 3 5

为了更好地理解本次内容,咕咕侠决定手写一个极其简陋的Promise,并且实现ES2021引入的Promise.any()方法,篇幅较长,另开文章


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!