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>
相关推荐
stereohomology10 小时前
MS Edge很多事的一点是把地址栏复制的地址自动转标题文本
前端·edge
imaol110 小时前
链表 -- 环链表
java·前端·链表
imaol111 小时前
链表 -- 双向链表
java·前端·链表
东风破_11 小时前
大前端手里的 Next.js:从 #root 到 SEO,一份 HTML 的两种命运
前端·后端
IT_陈寒11 小时前
Vue的v-for不听话?我被这个Key的坑整懵了
前端·人工智能·后端
王林不想说话11 小时前
ES6 到 ES2026 全面进阶指南:新特性、原理、示例与工程落地
前端·javascript·面试
用户435237138149311 小时前
🚀 Vue3 + TypeScript 学习笔记:从泛型 T 到 Promise<T>,终于搞懂了 keyof 和 typeof
前端
跟着群主去吃肉11 小时前
Cinemachine的应用-第三人称视角
前端·unity3d·游戏开发
东方小月11 小时前
从零开发一个 Coding Agent(十):实现 CLI 参数解析与静态命令
前端·人工智能·开源
阿黎梨梨11 小时前
Next.js 全栈开发:从 SPA 的痛点到 SSR 的破局之道
前端·后端