【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>
相关推荐
zongzi_49431 分钟前
二次封装的天气时间日历选择组件
开发语言·javascript·ecmascript
麻辣_水煮鱼1 小时前
vue数据变化但页面不变
前端·javascript·vue.js
一条晒干的咸魚1 小时前
【Web前端】实现基于 Promise 的 API:alarm API
开发语言·前端·javascript·api·promise
WilliamLuo2 小时前
MP4结构初识-第一篇
前端·javascript·音视频开发
过期的H2O22 小时前
【H2O2|全栈】JS进阶知识(七)ES6(3)
开发语言·javascript·es6
前端Hardy2 小时前
HTML&CSS:数据卡片可以这样设计
前端·javascript·css·3d·html
松树戈2 小时前
JS推荐实践
开发语言·javascript·ecmascript
vener_2 小时前
LuckySheet协同编辑后端示例(Django+Channel,Websocket通信)
javascript·后端·python·websocket·django·luckysheet
老码沉思录3 小时前
React Native 全栈开发实战班 - 性能与调试之打包与发布
javascript·react native·react.js
乐闻x3 小时前
Vue实践篇:如何在 Vue 项目中检测元素是否展示
前端·javascript·vue.js