本文主要讲述的是js执行栈中的一个重要面试题。
涉及调用栈,微任务队列,宏任务队列的执行顺序。
首先我们来了解上述三者大概会有哪些实际的例子。
1.调用栈:全局consolo.log()调用语句,function的调用。promise里的第一个回调函数(这里特别说明,不包括then回调和catch回调)
2.微任务队列:async await异步组合,promise异步操作(catch回调和then回调)。
3.宏任务队列:setTimeout,setInterval等等。
接下来拿一道面试题练练手就清晰了:
var p = new Promise((resolve)=>{
console.log(1) //1 执行时该语句直接进去调用栈1,
resolve(7)
})
function func1(){
setTimeout(()=>{
console.log(2) // 5 setTimeout,推进宏任务消息队列中 宏任务1
},1000)
func2()
console.log(3) //3 调用栈3
p.then(()=>{ //在微任务队列当中,微任务2 上面定义的resolve是不会先把then回调函数推入微任务队列的,只有把then调用出来才推入微任务队列。
console.log(7)
})
}
function func2(){
console.log(4) //2 调用栈2
}
async function func3(){
console.log(5) //2 async await一律推进微任务队列当中,微任务1
await setTimeout(()=>{
console.log(6) //6 setTimeout,推进消息队列当中(也就是宏任务队列)宏任务2
},1000)
}
func1() //这个函数调用归入调用栈
func3() //调用栈
//输出 1 4 3 5 7 2 6