js 中的同步任务、异步(微队列、宏队列)执行输出顺序

2020-6-2 Jon js+jquery+ajax

js 的执行顺序:js首先执行同步代码,然后执行微队列中的代码,最后执行宏队列中的代码。如果都是微任务或宏队列,谁先加入微队列或宏队列就先输出谁(谁在前面就先输出谁)

1. js 中的宏队列
  • dom 事件回调
  • ajax 回调
  • 定时器回调 setTimeout
2. js 中的微队列
  • promise 回调
  • async(原理Promise)
  • h5 MutationObserver
  • queueMicrotask(兼容性较差ie edge不支持)
  • asap库(原理就是封装了 MutationObserver 和 nodejs中的 process.nextTick())
3. js 中的队列执行顺序测试
  1. 第一题
/*
  宏任务 setTimeout
*/
setTimeout(() => {
  console.log('setTimeout')
})

/*
  微任务 ES6 Promise
*/
Promise.resolve('ES6 Promise').then((v) => {
  console.log(v)
})

/*
  微任务 H5新特性 MutationObserver
*/
// 为了节约开销,创建一个文本而不是创建一个 dom
const textNode = document.createTextNode('0');
// MutationObserver 可以绑定某个节点,当节点改变时,回调函数callback将放入微任务中
new MutationObserver(()=>{
  console.log('MutationObserver')
}).observe(textNode, {
  // 当文本改变时触发回调
  characterData: true
});
// 改变文本,回调callback触发
textNode.data = '1';

/*
  微任务 queueMicrotask 对象(支持node)
*/
queueMicrotask(() => {
  console.log('queueMicrotask');
});

/*
  同步执行
*/
console.log('同步任务');

/*
  在浏览器中依次输出
  "同步任务"
  "ES6 Promise"
  "MutationObserver"
  "queueMicrotask"
  "setTimeout"
*/
  1. 第二题
setTimeout(function(){
  console.log('111');
},0);
new Promise(function(resolve, reject){
  console.log('222');
  for (let i = 0; i < 1000; i++) {
    var count = i*(i+1)
  }
  resolve('333');
  console.log('444', count);
}).then(function(v){
  console.log(v);
  return Promise.resolve(v+1);
}).then(v=>{
  console.log(v);
  return Promise.reject('555')
}).catch(e=>{
  console.log(e)
  return new Promise(function(resolve, reject){
    setTimeout(() => {
      console.log('666');
      resolve('777');
      resolve('888')
    }, 0);
  })
}).then((v)=>{
  console.log(v);
});
new Promise((resolve,reject)=>{
  console.log('999');
  setTimeout(() => {
    resolve('aaa')
    console.log('bbb');
  }, 0);
}).then(v=>{
  console.log(v);
  new Promise((resolve,reject)=>{
    console.log('ccc');
    setTimeout(() => {
      reject('ddd')
    });
    resolve('eee');
  })
}).then(v=>{
  console.log(v);
},e=>{
  console.log(e);
})
console.log('fff');
/* 
正确输出顺序为 222 444 999000 999 fff 333 3331 555 undefined 111 bbb aaa ccc undefined 666 777 */

如果上面两题的结果都能够理解的话,说明就真正的理解 同步任务、异步(微队列、宏队列)任务了,再看其他的面试题也就不在话下了

MutationObserver
MutationObserver

标签: js 异步 微队列 宏队列 promise 面试题 MutationObserver asap

分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):

声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!

发表评论:

皖ICP备15010162号-1 ©2015-2022 知向前端
qq:1614245331 邮箱:13515678147@163.com Powered by emlog sitemap