【Promise】JS 异步之宏队列与微队列

文章目录

  • [1 原理图](#1 原理图)
  • [2 说明](#2 说明)
  • [3 相关面试题](#3 相关面试题)
    • [3.1 面试题1](#3.1 面试题1)
    • [3.2 面试题2](#3.2 面试题2)
    • [3.3 面试题3](#3.3 面试题3)
    • [3.4 面试题4](#3.4 面试题4)

1 原理图

2 说明

  • JS 中用来存储待执行回调函数的队列包含 2 个不同特定的队列:宏队列和微队列。
  • 宏队列:用来保存待执行的宏任务(回调),比如:定时器回调 / DOM事件回调 / ajax 回调。
  • 微队列:用来保存待执行的微任务(回调),比如:promise的回调 / MutationObserver的回调。
  • JS 执行时会区别这 2 个队列:
    • JS 引擎首先必须先执行所有的初始化同步任务代码。
    • 每次准备取出第一个宏任务执行前,都要将所有的微任务一个一个取出来执行。
html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>10_宏队列与微队列</title>
</head>

<body>
  <script>
    setTimeout(() => { //会立即放入宏队列
      console.log('timeout callback1()'); //后1
      Promise.resolve(3).then(
        value => { //会立即放入微队列
          //每次取出宏任务前需要把所有的微任务处理掉
          console.log('Promise onResolved3()', value); //timeout callback2()之前
        }
      )
    }, 0);

    setTimeout(() => { //会立即放入宏队列
      console.log('timeout callback2()'); //后2
    }, 0);

    Promise.resolve(1).then(
      value => { //会立即放入微队列
        console.log('Promise onResolved1()', value); //先1
      }
    )
    Promise.resolve(1).then(
      value => { //会立即放入微队列
        console.log('Promise onResolved2()', value); //先2
      }
    )
  </script>
</body>

</html>

3 相关面试题

3.1 面试题1

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>11_Promise相关面试题1</title>
</head>

<body>
  <script type="text/javascript">
    setTimeout(() => { //放入宏队列 4
      console.log(1);
    }, 0)
    
    Promise.resolve().then(() => { //放入微队列 2
      console.log(2);
    })
    
    Promise.resolve().then(() => { //放入微队列 3
      console.log(4);
    })
    
    console.log(3); //同步代码 1

    //输出:3 2 4 1
  </script>
</body>

</html>

3.2 面试题2

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>11_Promise相关面试题2</title>
</head>

<body>
  <script type="text/javascript">
    setTimeout(() => { //放入宏队列
      console.log(1);
    }, 0)

    new Promise((resolve) => {
      console.log(2); //同步执行
      resolve();
    }).then(() => { //放入微队列
      console.log(3);
    }).then(() => { //上面是pending状态,将此回调函数先存在callbacks中,3执行后放4
      console.log(4);
    })

    console.log(5); //同步执行

    //输出:2 5 3 4 1

    /**
     * 宏: [1]
     *     []
     * 微: [3]
     *     [4]
     *     []
     */

  </script>
</body>

</html>

3.3 面试题3

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>11_Promise相关面试题3</title>
</head>

<body>
  <script type="text/javascript">
    const first = () => (new Promise((resolve, reject) => {
      console.log(3); //同步

      let p = new Promise((resolve, reject) => {
        console.log(7); //同步
        setTimeout(() => { //放入宏队列
          console.log(5);
          resolve(6);
        }, 0)
        resolve(1); //p成功
      })
      
      resolve(2); //first()成功
      p.then((arg) => { //放入微队列
        console.log(arg); //1
      })
    }))

    first().then((arg) => { //放入微队列
      console.log(arg); //2
    })

    console.log(4); //同步

    //3 7 4 1 2 5
    /**
     * 宏: [5]
     * 微: [1, 2]
     */

  </script>
</body>

</html>

3.4 面试题4

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>11_Promise相关面试题4</title>
</head>

<body>
  <script type="text/javascript">
    setTimeout(() => { //放入宏队列
      console.log("0");
    }, 0)

    new Promise((resolve, reject) => {
      console.log("1"); //立刻执行
      resolve();
    }).then(() => { //放入微队列 return undefined
      console.log("2");
      new Promise((resolve, reject) => {
        console.log("3"); //3
        resolve();
      }).then(() => { //放入微队列
        console.log("4");
      }).then(() => { //.then()执行,内部缓存回调函数,然后外层.then()执行完毕
        console.log("5");
      })
    }).then(() => { //放入微队列
      console.log("6");
    })

    new Promise((resolve, reject) => {
      console.log("7");
      resolve();
    }).then(() => { //放入微队列
      console.log("8");
    })

    //1 7 2 3 8 4 6 5 0

    /**
     * 宏: [0]
     *     []
     * 微: [2对应的回调函数, 8]
     *     [8, 4, 6]
     *     [4, 6]
     *     [6, 5]
     *     [5]
     *     []
     */
  </script>
</body>

</html>
相关推荐
CodeToGym3 小时前
使用 Vite 和 Redux Toolkit 创建 React 项目
前端·javascript·react.js·redux
Cachel wood4 小时前
Vue.js前端框架教程8:Vue消息提示ElMessage和ElMessageBox
linux·前端·javascript·vue.js·前端框架·ecmascript
PP东4 小时前
ES6学习Generator 函数(生成器)(八)
javascript·学习·es6
孤留光乩6 小时前
从零搭建纯前端飞机大战游戏(附源码)
前端·javascript·游戏·html·css3
伊泽瑞尔.6 小时前
el-tabs标签过多
前端·javascript·vue.js
2401_854391087 小时前
智能挂号系统设计典范:SSM 结合 Vue 在医院的应用实现
前端·javascript·vue.js
觉醒的程序猿7 小时前
vue2设置拖拽选中时间区域
开发语言·前端·javascript
m0_748252238 小时前
前端关于pptxgen.js个人使用介绍
开发语言·前端·javascript
Super毛毛穗9 小时前
Vue中<script setup></script>的主要语法元素和特性
前端·javascript·vue.js·前端框架
User_undefined9 小时前
uniapp Native.js 调用安卓arr原生service
android·javascript·uni-app