js代码输出顺序

最新推荐文章于 2024-05-05 22:36:39 发布

Xie_bro777

最新推荐文章于 2024-05-05 22:36:39 发布

阅读量1.3k

点赞数 2

分类专栏：前端文章标签：队列 javascript 同步定时任务

本文链接：https://blog.csdn.net/xxxxxxxx00772299/article/details/109764773

版权

前端专栏收录该内容

34 篇文章 1 订阅

订阅专栏

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>

执行结果：
在这里插入图片描述

理智分析一波：

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

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

Xie_bro777

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
js代码输出顺序

js代码输出顺序，涉及到：    console.log();    async…await;    setTimeout();    Promise().then()最近面试做到的一个题目，感觉很有意思，拿来分享一波！！！！完整代码附赠：<!DOCTYPE html><html lang="en"><
复制链接

扫一扫