async function async1() {
console.log('async1 start');
await async2();
console.log('async1 end');
}
async function async2() {
console.log('async2');
}
console.log('script start');
setTimeout(function () {
console.log('setTimeout1');
}, 200);
setTimeout(function () {
console.log('setTimeout2');
new Promise(function (resolve) {
resolve();
}).then(function () {
console.log('then1');
});
new Promise(function (resolve) {
console.log('Promise1');
resolve();
}).then(function () {
console.log('then2');
});
}, 0);
async1();
new Promise(function (resolve) {
console.log('promise2');
resolve();
}).then(function () {
console.log('then3');
});
console.log('script end');
执行顺序如下
- script start
- async1 start
- async2
- promise2
- script end
- async1 end
- then3
- setTimeout2
- Promise1
- then1
- then2
- setTimeout1
执行解析:
- 首先整体执行下来,会遇到console.log(‘script start’);是同步任务
直接输出 script start(1); - 接着执行下来,遇到第一个setTimeout 执行时间是0.2秒,先挂起,放进主线程
- 再往下执行遇到第二个 setTimeout 执行时间是0秒,也先挂起,放到第一个setTimeout的前面
- 继续执行,遇到async1(); 执行里面的同步任务 输出async1 start(2),接着执行async2,输出async2(3) 这里有await,后面的代码会被推进微任务
- 继续执行 遇到new Promise 会立即执行,输出promise2(4),then会被推进本轮的第二个微任务。
- 接着遇到 console.log(‘script end’);同步执行 输出script end(5)
- 第一轮执行完后有两个微任务,依次执行,输出async1 end(6) then3(7)
- 第一轮执行完毕, 之前执行的时候,把两个setTimeout(宏任务)推进主线程,先执行第一个里面的同步任务,输出setTimeout2(8),遇到promise,then被推进微任务,又遇到下一个promise,立即执行器有同步任务,输出 Promise1(9),then被推进微任务
- 本轮的宏任务执行完毕,接着执行它产生的两个微任务,依次输出 then1(10) then2(11)
- 第二轮执行完毕,到这里之后,还剩下一个宏任务setTimeout 输出setTimeout1(12)
实际上就是把代码拆出来分成一个个宏任务,每一个宏任务里边会伴随一些微任务,比如上面的代码,JavaScript首先把这整个代码当成第一个宏任务,执行下来遇到同步任务,直接执行,遇到属于本轮的微任务,先放到任务队列中,等整体的宏任务执行完毕,会去执行本次的微任务, 遇到宏任务会依次放到主线程中。等这一轮的执行完毕。又去执行第一轮放到主线程中的宏任务,宏任务里面可能会有微任务。等主线程当前的宏任务执行完毕,再去执行它这次产生的微任务。一直反复执行这样的一个过程。
学习心得:多练习几次,还有就是找不同的技术文章反复阅读,不同的作者编写的可能会不一样,可以多篇优秀文章一起阅读,寻找共鸣点,反复推敲。还有就是找类似的题目,尝试根据自己理解写出来,对比对错,找出错误的原因,由易到难。反复阅读复习,你会发现惊喜。