JS异步宏队列与微队列原理区别详解


Posted in Javascript onJuly 02, 2020

1. 原理图

JS异步宏队列与微队列原理区别详解

2. 说明

JS 中用来存储待执行回调函数的队列包含 2 个不同特定的列队

  • 宏列队:用来保存待执行的宏任务(回调),比如:定时器回调、DOM 事件回调、ajax 回调
  • 微列队:用来保存待执行的微任务(回调),比如:promise的回调、MutationObserver 的回调

JS 执行时会区别这 2 个队列

  • JS 引擎首先必须先执行所有的初始化同步任务代码
  • 每次准备取出第一个宏任务执行前, 都要将所有的微任务一个一个取出来执行,也就是优先级比宏任务高,且与微任务所处的代码位置无关

下面这个例子可以看出Promise要先于setTimeout执行:

setTimeout(() => { //立即放入宏队列
   console.log('timeout callback1()')
   Promise.resolve(3).then(
    value => { //立即放入微队列
     console.log('Promise onResolved3()', value)
    }
   )
  }, 0)

  setTimeout(() => { //立即放入宏队列
   console.log('timeout callback2()')
  }, 0)

  Promise.resolve(1).then(
   value => { //立即放入微队列
    console.log('Promise onResolved1()', value)
    setTimeout(() => {
     console.log('timeout callback3()', value)
    }, 0)
   }
  )

  Promise.resolve(2).then(
   value => { //立即放入微队列
    console.log('Promise onResolved2()', value)
   }
  )

  // Promise onResolved1() 1
  // Promise onResolved2() 2
  // timeout callback1()
  // Promise onResolved3() 3
  // timeout callback2()
  // timeout callback3() 1

3. 相关题目

代码一:

// 3 7 4 1 2 5
  /*
  宏: []
  微: []
  */
  const first = () => (new Promise((resolve, reject) => {
   console.log(3)
   let p = new Promise((resolve, reject) => {
    console.log(7)
    setTimeout(() => {
     console.log(5)
     resolve(6) //会被忽略,因为会先执行微队列里的resolve(1),此时状态已经改变过了,且状态只能改变一次
    }, 0)
    resolve(1)
   })
   resolve(2)
   p.then((arg) => {
    console.log(arg)
   })
  }))

  first().then((arg) => {
   console.log(arg)
  })
  console.log(4)

代码二:

// 1 7 2 3 8 4 6 5 0   
  setTimeout(() => {
   console.log("0")
  }, 0)
  new Promise((resolve, reject) => {
   console.log("1")
   resolve()
  }).then(() => {
   console.log("2")
   new Promise((resolve, reject) => {
    console.log("3")
    resolve()
   }).then(() => {
    console.log("4")
   }).then(() => {
    console.log("5")
   })
  }).then(() => {
   console.log("6")
  })

  new Promise((resolve, reject) => {
   console.log("7")
   resolve()
  }).then(() => {
   console.log("8")
  })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
Javascript玩转继承(一)
May 08 Javascript
jQuery大于号(>)选择器的作用解释
Jan 13 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
socket.io学习教程之基本应用(二)
Apr 29 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
JS实现可针对算术表达式求值的计算器功能示例
Sep 04 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
微信小程序实现页面浮动导航
Jan 28 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 #Javascript
JS字符串和数组如何实现相互转化
Jul 02 #Javascript
Vue父子之间值传递的实例教程
Jul 02 #Javascript
JS出现404错误原理及解决方案
Jul 01 #Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 #Javascript
详解vue3.0 diff算法的使用(超详细)
Jul 01 #Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 #Javascript
You might like
PHP 函数执行效率的小比较
2010/10/17 PHP
PHP aes (ecb)解密后乱码问题
2015/06/22 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
JavaScript 拾漏补遗
2009/12/27 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
2015/08/26 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
JavaScript必知必会(九)function 说起 闭包问题
2016/06/08 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
python之Socket网络编程详解
2016/09/29 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
Python贪心算法实例小结
2018/04/22 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
电视购物广告词
2014/03/19 职场文书
品酒会策划方案
2014/05/26 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
明确岗位职责
2015/02/14 职场文书
被告代理词范文
2015/05/25 职场文书
首次购房证明
2015/06/19 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers