前言:为什么要写这篇文章?很简单,面试被虐了!对就是这么简单。为了挽回颜面,事后马上恶补了一下这方面的知识。俗话说(真理):好记性不如烂笔头,怕忘记就写了这篇文章,同时也是为了完成自己前几天立的flag,一个月写一篇文章,下面正式进入正题
当时面试题具体啥样子忘记了,从网上找到了类似的面试题,好像是头条的面试题
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("setTimeout");
}, 0);
async1();
new Promise(function(resolve) {
console.log("promise1");
resolve();
}).then(function() {
console.log("promise end");
});
console.log("script end");
答案再最后,大家可以先自己谢谢运行结果,然后看一下你会挂在哪一步,这是是我个人整理的笔记,有助于大家理解本体,有错误的欢饮欢迎指出共同交流(本来项画图的,电脑没找到画图工具,找到了也用不习惯,于是乎直接手写拍照吧,字丑,让大家见笑了)。
总结就是js的任务执行顺序是这样的:同步任务>异步任务(微任务>宏任务)
理解了这一点我们再来细看刚才的题
async function async1() {
console.log("async1 start"); // 同步任务执行,打印“async1 start”
await async2(); // 这里说明一点,await 会等待async2()执行,但是await async2()后面的代码不会继续向下执行,而是先跳出async1(),把下面的任务放到微任务队列去等待执行
console.log("async1 end");
}
async function async2() {
console.log("async2");
}
console.log("script start"); // 同步任务,先执行,所以首先打印 “script start”,继续往下执行代码
setTimeout(function() { // 这里遇到异步任务setTimeout,属于宏任务,所以把setTimeout放到宏任务队列等待,代码继续往下执行同步任务
console.log("setTimeout");
}, 0);
async1(); // 这里调用了async1() ,所以取执行该任务,去看async1()方法体
new Promise(function(resolve) { // 这一要注意Promise定义时一个同步函数,它的resolve合reject是异步微任务
console.log("promise1"); // 同步,直接打印“promise1”
resolve(); // 这里resolve(); 属于异步函数的微任务,所以会放到微任务队列等待,所以这里代码继续向下会先执行console.log("script end");打印“script end”
}).then(function() {
console.log("promise end");
});
console.log("script end");
1.同步任务执行完以后的打印结果为:script start,async1 start,async2,promise1,script end
2.同步任务执行完以后,event Loop会去执行微任务队列(微任务队列中任务执行顺序为先进先出,谁先进入的队列谁先执行),直到微任务队列中的任务都执行完才去执行宏任务队列。
3.最后执行宏任务队列setTimeout,打印setTimeout
最后的结果就是:script start,async1 start,async2,promise1,script end,async1 end,promise end,setTimeout
本人也是根据自己的验证结果来总结的,验证过程可能不严谨会有错误,欢迎大神指点。好了,吃饭去了