js运行机制题型

js运行的顺序是同步任务-》微任务栈-》宏任务栈，然后一直按照这个顺序

• 1. promise和setTimeout

  console.log(1);
  new Promise((resolve, reject) => {
    console.log(2);
    resolve();
    setTimeout(() => {
      console.log(3);
    }, 0);
  }).then(function() {
    console.log(4);
    setTimeout(function () {
      console.log(5);
    }, 0);
  });
  // 上面的运行结果为1 2 4 3 5

第一行是同步任务，所以先执行，输出1；
new Promise()这部分也是同步任务，所以输出2；碰到setTimeout放到宏任务栈；
接着执行碰到promise.then这个微任务，所以先执行，输出4；
又碰到setTimeout这个宏任务，放到宏任务栈；
第一个setTimeout先到时间，所以输出3；
最后输出5；

 console.log(1);
  new Promise((resolve, reject) => {
    console.log(2);
    resolve();
    setTimeout(() => {
      console.log(3);
    }, 100);
  }).then(function () {
    console.log(4);
    setTimeout(function () {
      console.log(5);
    }, 0);
  });
// 上面的输出结果是1 2 4 5 3

更复杂的一种：

  console.log(1);
  new Promise((resolve, reject) => {
    console.log(2);
    resolve();
  }).then(function () {
    console.log(3);
    setTimeout(function () {
      console.log(4);
    }, 0);
  });
  setTimeout(function () {
    console.log(5);
    new Promise((resolve, reject) => {
      console.log(6);
      resolve();
    }).then(function () {
      console.log(7);
      setTimeout(function () {
        console.log(8);
      }, 0);
    });
  }, 0);
  // 上面的运行结果为1 2 3 5 6 7 4 8

改个时间就不一样了

  console.log(1);
  new Promise((resolve, reject) => {
    console.log(2);
    resolve();
  }).then(function () {
    console.log(3);
    setTimeout(function () {
      console.log(4);
    }, 0);
  });
  setTimeout(function () {
    console.log(5);
    new Promise((resolve, reject) => {
      console.log(6);
      resolve();
    }).then(function () {
      console.log(7);
      setTimeout(function () {
        console.log(8);
      }, 0);
    });
  }, 10);
  // 上面的运行结果为1 2 3 4 5 6 7 8

• 2. eventLoop总结：
     js是单线程非阻塞的脚本语言。
     调用方法会 产生执行环境；
     a.所有的同步任务都在主线程上运行，形成执行栈；
     b.主线程之外有一个宏任务队列，一旦异步任务有了运行结果，就会在宏任务栈里面放置一个事件(对应的回调函数)；
     b.一旦执行栈中的同步任务执行完成，就会去执行微任务栈里的任务，微任务栈里面的任务执行完毕，就会去执行宏任务栈里面的任务（事件、异步任务）；
     d.上面三个步骤不断重复；
     微任务有：
     promise.then、process.nextTick、MutationObserver;
     宏任务有：
     setTimeout、setImmediate、setInterval、requestAnimationFrame;