【javascript 消息事件队列】eventloop事件循环面试题解析

299 阅读1分钟

本文主要讲述的是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