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 相关文章推荐
JS option location 页面跳转实现代码
Dec 27 Javascript
JavaScript 面向对象编程(1) 基础
May 18 Javascript
js getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
浅谈vue.use()方法从源码到使用
May 12 Javascript
js时间转换毫秒的实例代码
Aug 21 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
如何让vue长列表快速加载
Mar 29 Vue.js
微信小程序自定义扫码功能界面的实现代码
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/25 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
php实现映射操作实例详解
2019/10/02 PHP
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
Python写的贪吃蛇游戏例子
2014/06/16 Python
深入学习python的yield和generator
2016/03/10 Python
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
python版简单工厂模式
2017/10/16 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
Python用input输入列表的实例代码
2020/02/07 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
函授毕业自我鉴定
2013/12/19 职场文书
优秀民警事迹材料
2014/01/29 职场文书
开学典礼策划方案
2014/05/28 职场文书
维稳工作承诺书
2015/01/20 职场文书
银行催款通知书
2015/04/17 职场文书
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android