宏任务和微任务-CSDN博客

本文链接：https://blog.csdn.net/urnotwang/article/details/131526237

JS中用来存储待执行回调函数的队列中包含了两个特定的队列

      宏队列：用来保存执行的宏任务（回调），比如：定时器、DOM操作事件、Ajax请求

      微队列：用来保存执行的微任务（回调），比如：Promise.then()

JS执行的时候会区分两个队列

    - 首先JS引擎会先将所有的同步代码都执行完

    - 每次准备取出第一个宏任务执行之前，都需要将所有的微任务一个一个取出来执行

    - 顺序为同-微-宏

以下几道题目可以帮助更好地理解同步任务、宏任务、微任务的执行顺序，代码如图所示：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 
      JS中用来存储待执行回调函数的队列中包含了两个特定的队列
      宏队列：用来保存执行的宏任务（回调），比如：定时器、DOM操作事件、Ajax请求
      微队列：用来保存执行的微任务（回调），比如：Promise.then()
      JS执行的时候会区分两个队列
        - 首先JS引擎会先将所有的同步代码都执行完
        - 每次准备取出第一个宏任务执行之前，都需要将所有的微任务一个一个取出来执行
        - 顺序为同-微-宏
   -->
  <script>
    // 例题一
    // 同：222 444
    // 微：333
    // 宏：111
    // 输出顺序为：222 444 333 111
    // setTimeout(() => {
    //   console.log(111);
    // });
    // new Promise((resolve, reject) => {
    //   resolve()
    //   console.log(222);
    // }).then(res => {
    //   console.log(333);
    // })
    // console.log(444);

    // 例题二
    // 同：3 7 4
    // 微：1 2 
    // 宏：5 
    // 输出顺序为：3 7 4 1 2 5
    // 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)
    //   })
    //   resolve(2)
    //   p.then(res => {
    //     console.log(res);
    //   })
    // }))
    // first().then(res => {
    //   console.log(res);
    // })
    // console.log(4);

    // 例题三
    // 同：1 7
    // 微：2 3 8 4 6 5
    // 宏：0
    // 输出顺序为：1 7 2 3 8 4 6 5 0
    setTimeout(() => {
      console.log(0);
    }, 0);
    new Promise((resolve, rejecet) => {
      console.log(1);
      resolve()
    }).then(() => {
      console.log(2);
      new Promise((resolve, reject) => {
        console.log(3);
        resolve()
      }).then(() => {
        console.log(4);
      }).then(() => {
        console.log(5);
      })
    }).then(() => {
      console.log(6);
    })
    new Promise((resolve, reject) => {
      console.log(7);
      resolve()
    }).then(() => {
      console.log(8);
    })

  </script>
</body>

</html>