事件循环

最新推荐文章于 2024-10-01 18:51:18 发布

思考猫

最新推荐文章于 2024-10-01 18:51:18 发布

阅读量48

点赞数

分类专栏： ES6 文章标签： java servlet 服务器前端 es6

本文链接：https://blog.csdn.net/qq_48321086/article/details/125774306

版权

事件循环宏任务微任务 Promise 异步编程

关键词由CSDN通过智能技术生成

ES6 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

任务分为同步阻塞任务同步不阻塞任务异步阻塞任务异步不阻塞任务

      console.log(4);

      setTimeout(() => {

        console.log(1);

      }, 0); //异步宏任务

      setTimeout(() => {

        console.log(2);

      }, 0);

      var p1 = new Promise((n1, n2) => {

        n1(100);

      });

      p1.then(() => {

        console.log(3);

      }); //异步微任务

      console.log(5);

      //4 5 3 1 2

异步任务的队列优先级：异步宏任务先执行然后执行异步微任务这里出现情况是因为两个任务不在一次事件循环中(任务开启后内部又产生了新的任务)

事件循环过程：

先执行第一轮宏任务(脚本)中的代码:同步～微任务～下一轮宏任务中的代码

宏任务中:同步~微任务~下轮排队的宏任务

下轮排队的宏任务中:执行同步～执行微任务～遇到宏任务继续排队～执行下轮排队的宏任务

下轮排队的宏任务中:执行同步~执行微任务~遇到宏任务继续排队~执行下轮排队的宏任务

循环起来了～这就是事件循环。

总结:

1.宏任务先运行微任务后运行

2.then是微任务﹐全局脚本和计时器是宏任务

</script>

    <script src="">

      //事件循环练习题

      setTimeout(() => {

        console.log(0);

      });

      new Promise((resolve) => {

        console.log(1);

        setTimeout(() => {

          resolve();

          var p1 = new Promise((n1, n2) => {

            n1(20);

          });

          p1.then(() => console.log(2));

          console.log(3);

        });

        new Promise((n1, n2) => {

          n1(20);

        }).then(() => console.log(4));

      }).then(() => {

        console.log(5);

        var p2 = new Promise((n1, n2) => {

          n1(20);

        });

        p2.then(() => console.log(8));

        setTimeout(() => console.log(6));

      });

      console.log(7);



      //1 7 4 0 3 5 2 8 6