JavaScript 宏观任务和微观任务

[lesonwu]

概念

 宏观任务：宿主发起的任务为宏观任务，如setTimeout、setInterval、setImmediate，I/O
 微观任务：JavaScript引擎发起的任务为微观任务,如Promise

JavaScript引擎等待宿主环境分配宏观任务，宏观任务的队列可以理解为一个事件循环：

while(TRUE) {
  r = wait();
  execute(r);
}

每个宏观任务中又包含一个微观任务队列有：

• setTimeout等宿主API，会添加宏观任务
• Promise永远在队列尾部添加微观任务

分析异步执行的方法

分析有多少个宏观任务

1. 在每个宏观任务中，分析有多少个微观任务
2. 根据调用次序，确定宏观任务中微观任务执行次序
3. 根据宏观任务调用次序和触发原则，确定宏观任务执行次序
4. 确定整个次序

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封装成可以用于异步的函数
    //a b c

async/await

 async/await是ES7新特性，提供了用for if来编写异步代码的方式
async函数必定返回Promise，所有返回Promise的函数都可以认为是异步函数

• async用来表示函数是异步的，定义的函数会返回一个promise对象，可以使用then方法添加回调函数。我们把所有返回 Promise 的函数都可以认为是异步函数。[所以它也是微观任务]

• await 后面可以跟任何的JS 表达式。虽然说 await 可以等很多类型的东西，但是它最主要的意图是用来等待 Promise 对象的状态被 resolved。如果await的是 promise对象会造成异步函数停止执行并且等待 promise 的解决,如果等的是正常的表达式则立即执行。

async可以嵌套

function sleep(duration) {
  return new Promise(function(resolve, reject) {
    setTimeout(resolve, duration)
  })
}
async function foo(name) {
  await sleep(2000)
  console.log(name)
}
async function foo2() {
  await foo("a")
  await foo("b")
}
foo2()
//a b

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("green", 3000);
      await colorChange("red", 2000);
      await colorChange("yellow", 1000);
      // }
    }
    trafciLigth();
    //绿 红 黄