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>
相关推荐
用户92108026286几秒前
为什么 Header 是 HTTP 的灵魂
前端
特立独行的猫A2 分钟前
AtomMQTT Broker — 用 Rust 实现的轻量级高性能 MQTT 消息代理
前端·后端·架构
IMPYLH4 分钟前
HTML 的 <s> 元素
前端·html
lhldsg5 分钟前
折扣卡CPS小程序定制全流程实战指南:从需求分析到上线部署
java·前端·小程序
计算机魔术师18 分钟前
Lambert 算了一笔账:CUDA 绑定开源生态,每年值 100 亿美元
前端
Bs_MoneyMagnet21 分钟前
基于springboot+vue的医院陪诊服务预约平台的设计与实现 源码+文档
java·vue.js·spring boot·后端·spring
晴天1623 分钟前
HTML iframe 标签全面解析:原理、属性、实战场景与最佳实践
前端·html·状态模式
parade岁月27 分钟前
倒反天罡!押注 React Native 6 年后,Shopify 又回到了原生开发
android·前端·ios
柚稚姐姐28 分钟前
npm install pnpm -g npm error code EACCES npm error syscall symlink
前端·npm·node.js