JS:异步输出顺序问题

闲着没事儿出一道异步的题给大伙儿打发时间

先看题目:

javascript 复制代码
<script>
2  console.log("1"); // 同步任务

4  setTimeout(() => {
5    console.log("2");
6  }, 0);
7
8  Promise.resolve().then(() => {
9    console.log("3");
10  });
11
12  (async () => {
13    console.log("4");
14
15    await new Promise((resolve) => {
16      console.log("5"); 
17      resolve(); 
18    });
19
20    console.log("6"); 
21  })();
22
23  console.log("7");
24
26</script>

解题思路:同步任务=>微任务=>下一个宏任务

再看解析:

javascript 复制代码
    <script>
      //同步任务
      console.log("1");
      //宏任务
      setTimeout(() => {
        console.log("2");
      }, 0);
      //微任务
      Promise.resolve().then(() => {
        console.log("3");
      });
      //定义一个异步函数
      (async () => {
        //同步任务
        console.log("4");
        //await new Promise会立即执行,但是会等待Promise的状态变为resolved后再执行后面的代码
        //这里依旧是同步代码的一部分
        await new Promise((resolve) => {
          //同步任务
          console.log("5");
          //romise通过resolve()变为fulfilled,await表达式就会完成,后续的任务会在微任务队列中执行
          resolve();
        });
        //微任务
        console.log("6");
      })();
      //同步任务
      console.log("7");
      //打印顺序:1 4 5 7 3 6 2
    </script>
相关推荐
群联云防护小杜几秒前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB2414 分钟前
html复习
javascript·microsoft·html
汉得数字平台19 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹25 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录9 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows