征服前端复杂性：JavaScript Event Loop事件轮询机制详解

1.事件循环机制由三部分组成：

(1)调用栈

(2)微任务队列

(3)消息队列

event loop开始的时候，会从全局一行一行的执行，遇到函数调用，会压入到调用栈中，被压的函数叫做帧，当函数执行完毕后，会从调用栈中清除。

function fn1(){
  console.log(1)
}
function fn2(){
  console.log(2)
  fn1()
  console.log(3)
}
function fn3(){
  console.log(4)
}
fn2()
fn3()

代码从上往下一行一行执行，遇到函数调用时推到调用栈中，继续从上往下执行，遇到函数继续推到调用栈中。

js中的异步操作，比如fetch，setTimeout , setInterval 等宏观任务，压入到调用栈中的时候里面的消息会进入到消息队列中。消息队列中会等到调用栈清空后再执行。

setTimeout(()=>{
    console.log('定时器1')
},0)

function fn1(){
  console.log(1)
}
function fn2(){
  console.log(2)
  setTimeout(()=>{
    console.log('定时器2')
  },0)
  fn1()
  console.log(3)
}
function fn3(){
  console.log(4)
}
fn2()
fn3()

promise.then await 的异步操作会加入到微任务中，会等到调用栈清空后立即执行。先执行微任务再执行消息队列

let p=new Promise((resolve)=>{
  console.log('promise')
  return resolve(5)
})
async function b(){
  console.log('b')
  let res=await Promise.resolve(6)
  console.log(res)
}
b()


function fn1(){
  console.log(1)
}
function fn2(){
  console.log(2)
  setTimeout(()=>{
    console.log('定时器1')
  },0)
  fn1()
 let p=new Promise((resolve)=>{
  console.log('promise')
  return resolve(5)
})
async function b(){
  console.log('b')
  let res=await Promise.resolve(6)
  console.log(res)
}
b()


function fn1(){
  console.log(1)
}
function fn2(){
  console.log(2)
  setTimeout(()=>{
    console.log('定时器1')
  },0)
  fn1()
  p.then((res1)=>{
    console.log(res1)
  })
  console.log(3)
}
function fn3(){
  console.log(4)
}
fn2()
fn3()
  console.log(3)
}
function fn3(){
  console.log(4)
}
fn2()
fn3()