js代码输出顺序

绝地灬酷狼 2022-12-22 06:14 125阅读 0赞

## js代码输出顺序，涉及到： ##

###  console.log(); ###

###  async…await; ###

###  setTimeout(); ###

###  Promise().then() ###

最近面试做到的一个题目，感觉很有意思，拿来分享一波！！！！

**完整代码附赠：**

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>代码执行顺序</title>
    </head>
    <body>
      <script>
        console.log("1");
        async function async1(){
        
          await async2();
          console.log('2');
        }  
        async function async2(){
        
          console.log('3');
        }  
        async1();
        setTimeout(function(){
        
          console.log("4")
        },0)//=>默认会有最小的等待时间(V8一般是5~6MS)
        new Promise(
          function(resolve,reject){
        
            console.log("5");
            resolve();
        }).then(function(){
        
          console.log("6")
        }).then(function(){
        
          console.log("7")
        })
        console.log("8")
      </script>
    </body>
    </html>

执行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h4eHh4eHh4MDA3NzIyOTk_size_16_color_FFFFFF_t_70_pic_center]

#### 理智分析一波： ####

js是单线程的，在执行代码的过程中，先是自上而下执行，  
（1）第一个输出语句console.log（“1”）;直接输出“1”；  
（2）第二个是async…await;表明async1依赖于async2；当async1()调用时，先执行async2，输出“3”；将微任务async1放入微任务队列，然后往下执行。  
（3）第三个是一个定时器setTimeout();虽然它的执行时间看上去是0，但这是一个宏任务，先加入到宏任务队列中；  
（4）第四个是Promise();最后执行的是resolve();说明成功了，同步执行内部的代码，输出“5”；将.then之后东西加入到微任务队列中；  
（5）最后在执行一个console.log(“8”);直接执行，输出“8”；

此时整个代码同步执行完成，开始执行微任务队列中的async1以及promise.then()(为了方便，我们叫它p1);再执行宏任务队列中的定时器setTimeout();  
（6）队列先进先出的原则，先执行async1，输出“2”；  
（7）再执行p1，输出“6”；将后面的.then（为了方便，我们叫它p2）再次加入到微任务队列中；  
（8）再执行p2，输出“7”；  
（9）此时微任务队列执行完毕，执行宏任务队列中setTimeout();输出“4”； 整个代码全部执行完毕。

JS中的同步异步编程，宏任务与微任务的执行顺序，这里有一篇不错的博文，可以阅读阅读：
    https://www.cnblogs.com/jiajialove/p/11978644.html

对于宏任务-微任务、同步-异步的理解尚浅，如有什么不对的地方，请及时指出，
     万分感谢！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h4eHh4eHh4MDA3NzIyOTk_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/df67bb522ef041a3afa00e1f3b1e281a.png