异步队列包括:微任务队列和宏任务队列
微任务:Promise 、 process 、 nextTick
宏任务:整体代码script 、setTimeout 、 setInterval
通过代码来解释:
setTimeout( ()=>{ console.log("timeout") })
new Promise( (resolve, reject)=>{
console.log("promise")
resolve()
})
.then( ()=>{ console.log("then") })
console.log("同步")
上面的代码中一共有4次console.log(),它们的打印顺序就遵照上图,执行顺序如下:
- 开始执行,遇到setTimeout(),将此任务插入到宏任务队列,进行下一步
- 遇到Promise,Promise的第一部分是同步操作,.then()中才是异步操作,所以console.log(“promise”)被执行,进行下一步
- 遇到.then(),将此任务插入到微任务队列中,进行下一步
- 遇到同步操作的console.log(“同步”),直接执行
- 主线程第一次执行完毕,要开始进行问询,首先清空微任务队列,所以要先进行微任务队列的检查
- 发现微任务队列中还有一个.then()任务,执行.then()中的操作,console.log(“then”)被执行
- 再次检查微任务队列是否清空,已清空,看有无异步操作,无异步操作
- 开始执行宏任务队列中任务,console.log(“timeout”)
console.log()顺序:promis->同步->then->timeout
setTimeout(()=>{
console.log("timeout1")
new Promise((resolve,reject)=>{
console.log("p2")
resolve()
}).then(()=>{
console.log("then2")
})
})
new Promise((resolve,reject)=>{
console.log("promise1")
resolve()
}).then(()=>{
console.log("then1")
setTimeout(()=>{
console.log("time2")
})
})
console.log("同步1")
再复杂一点,顺序:promise1->同步1->then1->timeout1->p2->then2->time2