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>
相关推荐
子兮曰3 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰3 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万3 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝3 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
A黄俊辉A3 天前
uniapp webview中实现 app和内嵌的H5双向通信
vue.js·json
三十而立洋3 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁3 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
李少兄3 天前
JavaScript 隐式全局变量解析
javascript
honkun63 天前
vue 表格组件 vxe-table 配置 ajax 请求自动加载数据与表单查询
vue.js·vxe-table
kybs19913 天前
全球灾害数据分析可视化 毕业设计-附源码66794
vue.js·spring boot·mysql·安全·django·c#·asp.net