因为JS是单线程的语言,因此需要一套时间循环机制来推动代码进行。
1、遇到同步任务,直接推入任务执行队列,遇到微任务,放进微任务队列,遇到宏任务,放进宏任务队列;
2、开始执行任务,首先清空任务执行队列,执行完后去微任务队列中寻找,如果有任务则以此推入任务执行队列执行;
3、清空微任务队列后,将宏任务队列中的第一个任务推入任务执行队列中进行,执行完毕后,再次检查微任务队列中是否有任务,如果有,则将其依次推入任务执行队列中进行;
4、上述过程不断循环,直到所有任务队列清空为止。
微任务:promise.then;nextTick
宏任务:setTimeout;setInterval
async/await:
如果使用了async/await语法,那么在执行到await时,会阻塞之后的代码,将其推入微任务队列中。
async function async1() {
console.log('async1 start')
await async2()
console.log('async1 end')
}
async function async2() {
console.log('async2')
}
console.log('script start')
setTimeout(function () {
console.log('settimeout')
})
async1()
new Promise(function (resolve) {
console.log('promise1')
resolve()
}).then(function () {
console.log('promise2')
})
console.log('script end')
结果:script start、async1 start、async2、promise1、script end、async1 end、promise2、settimeout。
Node中事件循环的差异
- 浏览器中,微任务在各个宏任务之间进行
- Node中,微任务在事件循环的各个阶段之间进行
比如,有以下代码:
setTimeout(()=>{
console.log('timer1')
Promise.resolve().then(()=>{
console.log('promise1')
})
},0)
setTimeout(()=>{
console.log('timer2')
Promise.resolve().then(()=>{
console.log('promise2')
})
},0)
在浏览器的事件循环中,结果会是:timer1-promise1-timer2-promise2。这是因为执行完第一个timer1宏任务后,会先将微任务队列清空,再去执行下一个任务。
在Node中,结果是timer1-timer2-promise1-promise2。因为Node中,先进行完timer事件阶段(将timer1和timer2推入执行队列),然后才会清空一次微任务的队列。