Skip to content

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

推荐阅读:https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/

event-loop

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

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

JS 如何执行?

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

event loop 的执行过程?

js
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
js
<button id="btn">点击</button>
<script>
    console.log('Hi')
    document.getElementById('btn').addEventListener('click',function(e){
        console.log('clicked')
    })
    console.log('Bye')
</script>

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

基于 MIT 许可发布