首页 » 文章 » 文档 » js 异步问题 » 请描述 event loop(事件循环/事件轮询)的机制,可画图

请描述 event loop(事件循环/事件轮询)的机制,可画图

event loop(事件循环/事件轮询)

  • JS 是单线程运行的
  • 异步要基于回调来实现
  • event loop 就是异步回调的实现原理

JS 如何执行?

  • 从前到后,一行一行执行
  • 如果某一行执行报错,则停止下面代码的执行
  • 先执行完同步代码,再执行异步

event loop 的执行过程?

console.log('Hi')

setTimeout(function cb1(){
console.log('cb1') // cb1 即 callback
},5000)

console.log('Bye')
  • 同步代码,一行一行放在 Call Stack 执行
  • 遇到异步,会先“记录”下,等待时机(定时,网络请求等)
  • 时机到了,就移动到 Callback Queue
  • 如 Call Stack 为空(即同步代码执行完)Event Loop 开始工作
  • 轮询查找 Callback Queue,如有则移动 Call Stack 执行
  • 然后继续轮询查找(永动机一样)

DOM 事件和 event loop 的关系

  • JS 是单线程的
  • 异步(setTimeout,ajax等)使用回调,基于 event loop
  • DOM 事件也使用回调,基于 event loop
<button id="btn">点击</button>
<script>
console.log('Hi')
document.getElementById('btn').addEventListener('click',function(e){
console.log('clicked')
})
console.log('Bye')
</script>

以上代码通过点击事件把回调函数移动到 Callback Queue

»js 异步问题

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Scroll to Top