js中的微任务和宏任务

Posted she_will

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js中的微任务和宏任务相关的知识,希望对你有一定的参考价值。

  • 微任务 promise 、async await

    • 微任务 遇到微任务,放在当前任务列的最底端(then或者catch里面的内容)

  • 宏任务 setTimeout setInterval

    • 宏任务 遇到宏任务,放到下一个新增任务列的最顶端

  • 当前任务列执行完成了再去执行下一个任务列

    • 当then和then的外层都有宏任务时,先创建外层的宏任务

Promise.resolve().then(function () {
        console.log(1);
        Promise.resolve().then(function () {
          console.log(2);
        });
        Promise.resolve().then(function(){
            console.log(3);
        });
      });
      Promise.resolve().then(function(){
          console.log(4);
      })//1423

    async function fn(){
          console.log(1);
          await Promise.resolve().then(function(){
              console.log(2);
          })
          await Promise.resolve().then(function(){
              return 3;
          });
          await Promise.resolve().then(function(){
              console.log(4);
          })
      }
      fn().then(function(num){
          console.log(num);
      })//124underfined

      console.log(0);
      setTimeout(console.log(1),0);//这个里面执行的是代码块不是语句块,直接执行就OK了
      console.log(2);
      //012

 

以上是关于js中的微任务和宏任务的主要内容,如果未能解决你的问题,请参考以下文章

js中的微任务和宏任务

JavaScipt 中的事件循环机制,以及微任务 和宏任务的概念

JS同步任务与微任务和宏任务

详解队列在前端的应用,深剖JS中的事件循环Eventloop,再了解微任务和宏任务

js面试

微任务和宏任务的区别及具体场景