js运行机制题型

作者: 离陌夕 | 来源:发表于2019-07-03 20:50 被阅读0次

js运行机制题型
最全js运行机制
js new 运行机制
浅析Vue.nextTick()原理
运行机制，宏任务与微任务
前端知识点
js运行机制
Event Loop
JS的运行机制
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

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