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

1. 原理图

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")
  })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript队列函数和异步执行详解

    编辑注:在Review别人的JavaScript代码时曾看到过类似的队列函数,不太理解,原来这个是为了保证函数按顺序调用.读了这篇文章之后,发现还可以用在异步执行等. 假设你有几个函数fn1.fn2和fn3需要按顺序调用,最简单的方式当然是: fn1(); fn2(); fn3(); 但有时候这些函数是运行时一个个添加进来的,调用的时候并不知道都有些什么函数:这个时候可以预先定义一个数组,添加函数的时候把函数push 进去,需要的时候从数组中按顺序一个个取出来,依次调用: var stack =

  • JS实现队列与堆栈的方法

    JS实现队列与堆栈的方法

    本文实例讲述了JS实现队列与堆栈的方法.分享给大家供大家参考,具体如下: 在面向对象的程序设计里,一般都提供了实现队列(queue)和堆栈(stack)的方法,而对于JS来说,我们可以实现数组的相关操作,来实现队列和堆栈的功能,看下面的相关介绍. 一.看一下它们的性质,这种性质决定了它们的使用场合 队列:是一种支持先进先出(FIFO)的集合,即先被插入的数据,先被取出! 堆栈:是一种支持后进先出(LIFO)的集合,即后被插入的数据,先被取出! 二.看一下实现的代码(JS代码) var a=new

  • JS异步函数队列功能实例分析

    本文实例讲述了JS异步函数队列功能.分享给大家供大家参考,具体如下: 场景: 做直播,会有入场消息,入场特效,用户如果有坐骑,需要给他展示几秒钟的坐骑特效,如果几个人同时进场,那该怎么展示呢?这时候就会想到setTimeout函数,对,思路不错,但是,异步函数队列怎么实现呢?直接上代码: var Queue = function() { this.list = []; }; Queue.prototype = { constructor: Queue, queue: function(fn) {

  • 浅谈Vuejs中nextTick()异步更新队列源码解析

    vue官网关于此解释说明如下: vue2.0里面的深入响应式原理的异步更新队列 官网说明如下: 只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变.如果同一个 watcher 被多次触发,只会一次推入到队列中.这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要.然后,在下一个的事件循环"tick"中,Vue 刷新队列并执行实际(已去重的)工作.Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MutationOb

  • JavaScript 异步方法队列链实现代码分析

    在<javascript设计模式>中对这种方法作了比较详细的描述,实现方法的链式调用,只须让在原型中定义的方法都返回调用这些方法的实例对象的引用即可,看看书中的这段代码: 复制代码 代码如下: (function() { function _$(els) { this.elements = []; for (var i = 0, len = els.length; i < len; ++i) { var element = els[i]; if (typeof element == 's

  • JS实现队列的先进先出功能示例

    本文实例讲述了JS实现队列的先进先出功能.分享给大家供大家参考,具体如下: /** * [Queue] * @param {[Int]} size [队列大小] */ function Queue(size) { var list = []; //向队列中添加数据 this.push = function(data) { if (data==null) { return false; } //如果传递了size参数就设置了队列的大小 if (size != null && !isNaN(s

  • js下写一个事件队列操作函数

    前两天在网上看到这一系列的文章<写一个JavaScript异步调用框架1,2,3,4,5,6>. 异步操作可能会产生你不希望的事件触发顺序.这个问题以前也遇到过,当时没想太多,也就是直接多层嵌套(在ajax返回以后嵌套下一个事件)来解决. 认真的看了一遍.看的头昏,不得不说我可能基础并不好,在大局上的掌握也不好.d反正我是觉得很难理解,也不觉得它的调用时够方便的. 如果是这么调用: var chain = Async.go(0); chain .next(function(){setTimeo

  • JS处理数据四舍五入(tofixed与round的区别详解)

    1 .tofixed方法 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字.例如将数据Num保留2位小数,则表示为:toFixed(Num):但是其四舍五入的规则与数学中的规则不同,使用的是银行家舍入规则,银行家舍入:所谓银行家舍入法,其实质是一种四舍六入五取偶(又称四舍六入五留双)法.具体规则如下: 简单来说就是:四舍六入五考虑,五后非零就进一,五后为零看奇偶,五前为偶应舍去,五前为奇要进一. 显然这种规则不符合我们平常在数据中处理的方式.为了解决这样的问题,可以自定义

  • 基于js 各种排序方法和sort方法的区别(详解)

    今天突发奇想,想明白sort方法是否比各种排序都有优势,所以就参考别人的代码,做了一个测试,结果令人惊讶啊,上代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,max

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

    1. 原理图 2. 说明 JS 中用来存储待执行回调函数的队列包含 2 个不同特定的列队 宏列队:用来保存待执行的宏任务(回调),比如:定时器回调.DOM 事件回调.ajax 回调 微列队:用来保存待执行的微任务(回调),比如:promise的回调.MutationObserver 的回调 JS 执行时会区别这 2 个队列 JS 引擎首先必须先执行所有的初始化同步任务代码 每次准备取出第一个宏任务执行前, 都要将所有的微任务一个一个取出来执行,也就是优先级比宏任务高,且与微任务所处的代码位置无关

  • Node.js控制台彩色输出的方法与原理实例详解

    Node.js控制台彩色输出的方法与原理实例详解

    前言 我们都知道,在nodejs环境下使用普通的console.log,console.error,console.info输出都是不会有颜色的,如果你不知道,那你现在知道啦

  • node.js中fs.stat与fs.fstat的区别详解

    前言 fs.stat和fs.fstat他们的方法功能是一样的,都是获取文件的状态信息,本文主要介绍的是关于node.js中fs.stat与fs.fstat区别的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: fs.stat用法: fs.stat('./aa.js', function(err, stats) { if (err) { throw err; } console.log(stats); }); fs.fstat用法: fs.open('./aa.js', 'a', func

  • js截取字符串的两种方法及区别详解

    var long2="1988-0w-07"; alert(long2.substring(0,4)+"------"+long2.substring(5,6));   1988------0 alert(long2.substr(0,4)+"------"+long2.substr(5,2));            1988-----0w substring 截取的时候坐标  包括前边  不包括后边 substr    截取字符串前边参数的坐

  • PHP队列场景以及实现代码实例详解

    为了降低单点压力,通常会根据业务情况进行分表分库,将表分布在不同的库中(库可能分布在不同的机器上),但是一个业务场景可能会同时处理两个表的操作.在这种场景下,事务的提交会变得相对复杂,因为多个节点(库)的存在,可能存在部分节点提交失败的情况,即事务的ACID特性需要在各个不同的数据库实例中保证.比如更新db1库的A表时,必须同步更新db2库的B表,两个更新形成一个事务,要么都成功,要么都失败. 那么我们如何利用mysql实现分布式数据库的事务呢? mysql是从5.0开始支持分布式事务 这里先声

  • 前端JS图片懒加载原理方案详解

    目录 背景 原理 方案 方案一:img的loading属性设为“lazy” 使用方法 优点 兼容性 缺点 方案二:通过offsetTop来计算是否在可视区域内 优化 优点 缺点 方案三:通过getBoundingClientRect来计算是否在可视区域内 方案四:使用IntersectionObserver来判断是否在可视区域内 兼容性 优点 缺点 问题 布局抖动 响应式图片 SEO不友好 插件 背景 懒加载经常出现在前端面试中,是前端性能优化的常用技巧.懒加载也叫延迟加载,把非关键资源先不加载

  • js在浏览器中的event loop事件队列示例详解

    js在浏览器中的event loop事件队列示例详解

    目录 前言 认识一个栈两个队列 执行过程 简单例子 难一点的例子 总结 前言 以下内容是js在浏览器中的事件队列执行,与在nodejs中有所区别,请注意. 都说js是单线程的,不过它本身其实不是单线程,但是在浏览器中执行时只分配一个线程进行执行. 所以说js执行是单线程的,一次只能进行一项任务,就是一件任务一件任务做,做完一件做下一件. 认识一个栈两个队列 一个调用栈Stack. 一个宏队列,macrotask,也叫tasks. 一个微队列,microtask,也叫jobs. 执行过程 js就是

  • node.js事件循环机制及与js区别详解

    目录 一.是什么 二.流程 三.题目 一.是什么 在浏览器事件循环(opens new window)中,我们了解到javascript在浏览器中的事件循环机制,其是根据HTML5定义的规范来实现 而在NodeJS中,事件循环是基于libuv实现,libuv是一个多平台的专注于异步IO的库,如下图最右侧所示: 上图EVENT_QUEUE 给人看起来只有一个队列,但EventLoop存在6个阶段,每个阶段都有对应的一个先进先出的回调队列 二.流程 上节讲到事件循环分成了六个阶段,对应如下: tim

随机推荐