这么理解浏览器的事件循环是否正确?

function a1(){
    console.log('a1')
    setTimeout(function(){
    console.log('a2')
},3000)

}
function b1(){
  console.log('b1')
  setTimeout(function(){
    console.log('b2')
},6000)}
function c1(){
  console.log('c1')
}
a1()
b1()
c1()

通过上面的代码,setTimeout模拟异步和同步执行来分析浏览器执行JS的事件循环。
首先是引擎将上面的代码放到内存中,然后JS"通读"代码,直到遇到
a1() 发现是函数执行,就把它放到【执行栈】里面去执行,给它创建一个上下文作用域,上下文作用域内第一行是一个同步输出,于是就顺利执行,然后后面的setTimeout类似一个异步,于是将这个异步放入到【事件队列】去排队等待执行,这个时候a1()内部的作用域代码执行完毕,a1()也执行完毕,a1从【执行栈】移除,然后,后面就是将b1()放入【执行栈】,也是执行类似的输出任务以及将setTimeout放入【事件队列】排队,这个时候【事件队列】有两个任务等待执行,顺序是输出a2b2。后面接着a2()从【执行栈】移除,再将c1()移入【执行栈】执行。直到这个时候输出的内容依次是a1 b1 c1
然后,当前这个上下文作用域下,全部的同步任务都执行完毕了,就把第一个setTimeout放入【执行栈】执行里面的同步任务,接着移除,然后再放入第二个setTimeout执行里面的同步任务。于是就出现了先后输出a2 b2。整个过程是不是上面这样执行的呢?

另外,还有一个小小的疑问,当setTimeout设置的等待时间小于或者大于前面同步代码执行的时间会分别有什么情景出现

阅读 1.5k
1 个回答

代码的执行我是这么理解的:

  • 读到a1()方法:
    console.log('a1'):同步任务=> 输出a1
    setTimeout(function(){console.log('a2')},3000):异步任务,不立即执行,丢到宏任务队列等待
  • 开始读b1()方法(和a1()同理):
    console.log('b1'):同步任务=> 输出b1
    setTimeout(function(){console.log('b2')},6000):异步任务,不立即执行,丢到宏任务队列等待
  • 开始读c1()方法:
    console.log('c1'):同步任务=> 输出c1
    至此,所有的同步任务都执行完毕,开始执行异步任务队列,3秒后输出a2,6秒后输出b2
当setTimeout设置的等待时间小于或者大于前面同步代码执行的时间会分别有什么情景出现

这里我的理解是时间相同,就是先排队的先输出,时间小的先输出。你可以理解为机场的登机,那vip肯定是不一样的待遇

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题