js 宏观任务和微观任务> promise的代码为什么比setTimeout先执行

2019-04-08 18:48:30 阅读：302 来源： 互联网

标签：function resolve console log js promise Promise setTimeout

这篇文章是通过学习极客时间winter大大的《重学前端》中16| promise里的代码为什么比setTimeout先执行总结而来

宏观任务[MacroTask] 和微观任务[MicroTask]

第一次知道这个概念

promise

 var r = new Promise(function(resolve, reject) {
      console.log("a");
      resolve();
    });
    setTimeout(() => console.log("d"), 0);
    r.then(() => console.log("c"));
    console.log("b");

    // 执行顺序 a b c d


    setTimeout(() => console.log("d"), 0);
    var r1 = new Promise(function(resolve, reject) {
      resolve();
    });
    r1.then(() => {
      var begin = Date.now();
      while (Date.now() - begin < 1000);
      console.log("c1");
      new Promise(function(resolve, reject) {
        resolve();
      }).then(() => console.log("c2"));
    });
    // 虽然第二个promise 间隔了1秒 但是还是 先于setTimeout执行
    // c1  c2  d

通过一系列的实验，我们可以总结一下如何分析异步执行的顺序：
首先我们分析有多少个宏任务；
在每个宏任务中，分析有多少个微任务；
根据调用次序，确定宏任务中的微任务执行次序；
根据宏任务的触发规则和调用次序，确定宏任务的执行次序；
确定整个顺序。

function sleep(duration) {
      return new Promise(function(resolve, reject) {
        console.log("b");
        setTimeout(resolve, duration);
      });
    }
    console.log("a");
    sleep(5000).then(() => console.log("c"));

    // 将setTimeout封装成可以用于异步的函数

async/await

async 函数必定返回 Promise，我们把所有返回 Promise 的函数都可以认为是异步函数。[所以它也是微观任务]

   var obj = document.getElementById("animate");
    function timeSleep(times) {
      return new Promise((resolve, reject) => {
        setTimeout(resolve, times);
      });
    }
   async function colorChange(color, times) {
      obj.style.backgroundColor = color;
      await timeSleep(times);
    }

    async function trafciLigth() {
      // while (true) {
      await colorChange("#27ED4E", 3000);
      await colorChange("red", 2000);
      await colorChange("yellow", 1000);
      // }
    }
    trafciLigth();

参考这篇文章也可以帮助理解https://www.jianshu.com/p/4516ad4b3048

标签：function,resolve,console,log,js,promise,Promise,setTimeout
来源： https://blog.csdn.net/weixin_36852235/article/details/89101233

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js 宏观任务和微观任务> promise的代码为什么比setTimeout先执行

promise

async/await