宏任务与微任务

秋水不爱星河

已于 2022-07-19 14:31:43 修改

阅读量234

点赞数 1

分类专栏： JS+ES6 文章标签： javascript 前端

于 2022-07-18 11:27:08 首次发布

本文链接：https://blog.csdn.net/qq_53157160/article/details/125844794

版权

JS+ES6 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

字节青训营，主观论述题，写完发现自己这一块学的是真的拉胯，要补习啊。

代码以及详解如下：

JS是单线程分为 同步任务 与 异步任务

异步任务又分为 宏任务与微任务。（需要注意点就是这两个任务都是队列）

队列：先进先出 整个代码先进入（两个方法体进入）

1. 先执行所有同步任务，碰到异步任务放到任务队列中

2. 同步任务执行完毕，开始执行当前所有的异步任务

3. 先执行任务队列里面所有的微任务

4. 然后执行一个宏任务

5. 然后再执行所有的微任务

6. 再执行一个宏任务，再执行所有的微任务·······依次类推到执行结束。

以上3 - 6 - 3称为事件循环 Event loop

<!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>
    <div
      id="div"
      style="width: 200px; height: 200px; background-color: #bfa"
    ></div>
    <script>
      let div = document.querySelector("#div");
      div.addEventListener(
        "click",
        () => {
          new Promise((reslove) => {
              reslove(1);
          }).then((res) => {
            console.log(res);
          });
          setTimeout(() => {
            console.log(2);
          });
          console.log(3);
        },
        false
      );
      div.addEventListener(
        "click",
        () => {
          console.log('###############');
          new Promise((reslove) => {
              reslove(4);
          }).then((res) => {
            console.log(res);
          });
          setTimeout(() => {
            console.log(5);
          });
          console.log(6);
        },
        false
      );
    </script>
  </body>
</html>

有reslove 不被setTimeout包裹时，
代码顺序执行遇到new Promise，执行里面的代码（同步）
reslove(1) 扔进微任务队列
setTimeout(() => {console.log(2)}); 扔进宏任务队列
3 同步执行 console.log(3);
1 方法一执行完毕执行微任务队列reslove(1) console.log(1)
由于方法体二进入宏任务早于方法体一当中的 setTimeout(() => {console.log(2)});
所以先执行另一个方法体

###########
reslove(4) 扔进微任务队列
setTimeout(() => {console.log(5)}); 扔进宏任务队列
6 同步执行 console.log(6);
4 方法二执行完毕执行微任务队列reslove(4) console.log(4)
此时宏任务两个方法体完毕继续执行后续代码
2 setTimeout(() => {console.log(2)});
5 setTimeout(() => {console.log(5)});

如图：

<!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>
    <div
      id="div"
      style="width: 200px; height: 200px; background-color: #bfa"
    ></div>
    <script>
      let div = document.querySelector("#div");
      div.addEventListener(
        "click",
        () => {
          new Promise((reslove) => {
            setTimeout(() => {
              reslove(1);
            });
          }).then((res) => {
            console.log(res);
          });
          setTimeout(() => {
            console.log(2);
          });
          console.log(3);
        },
        false
      );
      div.addEventListener(
        "click",
        () => {
          console.log('###############');
          new Promise((reslove) => {
            setTimeout(() => {
              reslove(4);
            });
          }).then((res) => {
            console.log(res);
          });
          setTimeout(() => {
            console.log(5);
          });
          console.log(6);
        },
        false
      );
    </script>
  </body>
</html>

有reslove 被setTimeout包裹时
遇到new Promise((reslove) => { setTimeout(() => {reslove(1)});
进入new promise，发现是一个setTimeout扔进宏任务队列
setTimeout(() => {console.log(2)}); 扔进宏任务队列
3 然后console.log(3);
方法体一执行完发现微任务队列为空
由于方法体二进入宏任务早于方法体一里new Promise当中的 setTimeout(() => {console.log(1)});
所以先执行另一个方法体

###########

进入new promise，发现是一个setTimeout(()=>{reslove(4);})扔进宏任务队列
setTimeout(() => {console.log(5)}); 扔进宏任务队列
6 console.log(6)
两个方法体执行完毕，继续执行代码
方法体一扔进宏任务当中的
setTimeout(() => {
reslove(1);
1 }).then((res) => console.log(res) );
setTimeout(() => {
2 console.log(2);
});
方法体二扔进宏任务当中的
setTimeout(() => {
reslove(4);
4 }).then((res) => console.log(res) );
setTimeout(() => {
5 console.log(5);
});