宏队列与微队列

宏队列与微队列

 

1，宏队列：用来保存 待执行的宏任务（回调），

　　　　　  比如：定时器回调 、DOM事件回调、ajax回调

2，微队列：用来保存待执行的微任务（回调），

　　　　　  比如：promise的回调、MutationObserve的回调

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

　　JS引擎首先必须先执行所有的初始化同步任务代码

　　每次准备取出第一个宏任务执行前，都要将所有的微任务一个一个取出来执行

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

setTimeout(()=>{  //立即放入宏队列      console.log('setTimeout1')      Promise.resolve(3).then(       value => {  //立即放入微队列         console.log('onResolved3()', value)       }      )  },0)    setTimeout(()=>{  //立即放入宏队列    console.log('setTimeout2')  },0)    Promise.resolve(1).then(    value => {  //立即放入微队列      console.log('onResolved1()', value)      setTimeout(()=>{        console.log('setTimeout3', value)      },0)    }  )   Promise.resolve(2).then(   value => {  //立即放入微队列     console.log('onResolved2()', value)   } )

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

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

1 7 2 3 8 4 6 5 0