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

短命女 2022-10-16 15:27 184阅读 0赞

# 一道关于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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70]  
过程如下：

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70]: /images/20221014/ed956972bb9c443e9155f8897b88be3d.png