JS异步之宏队列与微队列

逃离我推掉我的手 2023-03-01 06:24 26阅读 0赞

## 1. 原理图 ##

![format_png][]

##  2. 说明 ##

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

*  **宏列队**：用来保存待执行的宏任务（回调），比如：定时器回调、DOM 事件回调、ajax 回调
 *  **微列队**：用来保存待执行的微任务（回调），比如：promise的回调、MutationObserver 的回调

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

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

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

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

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

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

## 3. 相关面试题 ##

### 代码一： ###

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

// 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)

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

### 代码二： ###

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

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

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

[format_png]: /images/20230209/dec5645753b54a1e97704d26c6dd1f69.png
[aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]: /images/20230209/cb1aa9c2b0e54c2891eccfcff3493b96.png

发表评论取消回复

表情：

评论列表（有 0 条评论，26人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS异步之宏队列与微队列

1. 原理图 ![format_png][] 2. 说明 JS 中用来存储待执行回调函数的队列包含 2 个不同特定的列队宏列队：用来保存待

逃离我推掉我的手/ 2023年03月01日 06:24/ 0 赞/ 27 阅读

相关 js异步之宏任务（marcroTask）和微任务（microTask）

js异步之宏任务（marcroTask）和微任务（microTask）先看一到面试题写出console.log的输出顺序 console.log(

我就是我/ 2022年12月25日 11:59/ 0 赞/ 202 阅读

相关 js异步之宏任务（marcroTask）和微任务（microTask）

先看一到面试题写出console.log的输出顺序 console.log(100); setTimeout(()=>{

系统管理员/ 2022年12月12日 04:59/ 0 赞/ 220 阅读

相关 Promise、Js异步之宏队列与微队列

回调原则： 1. 宏列队: 用来保存待执行的宏任务(回调), 比如: 定时器回调/DOM事件回调/ajax回调 2. 微列队: 用来保存待执行的微任务(回

素颜马尾好姑娘i/ 2022年10月29日 12:29/ 0 赞/ 194 阅读

相关 Vue异步更新队列

以下为官网详解 [Vue异步更新队列][Vue] Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的

约定不等于承诺〃/ 2022年10月24日 05:49/ 0 赞/ 146 阅读

相关 C 宏实现队列

[http://trac.openrays.org/projects/pmon/browser/trunk/sys/sys/queue.h?rev=2][http_trac.o

蔚落/ 2022年09月30日 07:06/ 0 赞/ 127 阅读

相关 java之异步消息队列

最近在研究网站的异步消息队列模型，渐渐有了一些心得，下面就说说我个人对于消息队列的理解。什么是消息队列？所谓消息队列，就是一个以队列数据结构为基础的一个实体，

超、凢脫俗/ 2022年06月08日 12:45/ 0 赞/ 483 阅读

相关 tensorflow 队列管理之异步操作

-- coding: utf-8 -- """ Created on Thu Oct 25 09:49:34 2018 @autho

阳光穿透心脏的1/2处/ 2022年05月13日 15:34/ 0 赞/ 121 阅读

相关数据结构（四）：队列之循环队列与链队列

队列概念队列是一种先进先出的结构，只允许在一端进行插入操作，在另一端进行删除操作，简称 FIFO ，允许插入的一端称为队尾，允许删除的一端称为队头假设队列

亦凉/ 2021年09月10日 16:24/ 0 赞/ 662 阅读

相关宏队列和微队列、event-loop事件循环

执行顺序: javaScript的单线程机制,会执行完所有同步任务,再去执行队列中的任务相同类型的任务,从上往下执行不同类型:微队列任

水深无声/ 2021年07月24日 12:36/ 0 赞/ 446 阅读