一道关于EventLoop事件循环事件队列的JS题

一道关于EventLoop事件循环事件队列的JS题

上代码

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('promise2');
 });
 console.log('script end');

最后输出什么？

答案：

script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout

在js执行过程中，会创建一个执行栈和事件队列，事件队列又分为宏任务和微任务

• 宏任务：定时器，事件绑定
• 微任务：promise async await then catch

过程如下：

• 浏览器解析代码，创建函数async1和函数async2
• 输出script start，接着往下走
• 创建一个定时器，放在宏任务队列中，继续往下
• async1（），函数执行，输出async1 start，往下
• await async2（），执行async2等待返回的结果，放入微任务队列中。往下
• 然后输出async2，继续往下
• new Promise的时候会立即把EC函数执行，并且new的时候是同步的，输出promise1，然后将resolve（）或者reject（）函数执行的内容放入微任务中，往下。
• 输出script end，然后执行栈中没有任务可以执行了后，就先取出微任务中的执行，接着再执行宏任务。
• 所以输出async1 end ，再输出promise2，接着输出setTimeout