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 相关文章推荐
JavaScript prototype对象的属性说明
Mar 13 Javascript
js 中{},[]中括号,大括号使用详解
May 12 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
jQuery渐变发光导航菜单的实例代码
Mar 27 Javascript
js调用css属性写法
Sep 21 Javascript
使用Sticker.js实现贴纸效果
Jan 28 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
js实现拖拽与碰撞检测
Sep 18 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获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
制作特殊字的脚本
2006/06/26 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
layui监听工具栏的实例(操作列表按钮)
2019/09/10 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
python计算圆周率pi的方法
2015/07/11 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
中学生社会实践活动总结
2014/07/03 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
2015企业年终工作总结范文
2015/05/27 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
python 算法题——快乐数的多种解法
2021/05/27 Python