什么是Event-loop(事件循环/事件轮询)

31 阅读1分钟

在学习event-loop前,首先要知道js是如何执行的:

  1. 从前到后,一句一句执行
  2. 如遇报错,停止执行后续代码
  3. 先执行同步代码,再执行异步代码

以代码示例,演示Event-loop的执行过程

console.log("Hi");
setTimeOut(function cb1(){
    console.log('cb1');
})

console.log("world");

首先来了解下每个模块的意思:

image.png

上述代码的执行过程为:

  1. 先将console.log("Hi");放入Call stack中,执行完成之后,清空call stack

image.png

  1. setTimeOut(cb1)放入call Stack中,由于setTimeOut是异步操作,所以会在web APIS中设置一个定时器,最后将call stack清空

image.png

  1. 再将console.log("world");放入call Stack中,执行。

image.png

  1. 这时候,同步代码已经执行完毕了,Event-Loop会去callback queue中去查找,若有回调函数,移入Call stack 中执行。

image.png

image.png

  1. 执行完毕之后,清空call stack

总结

event-loop的执行过程:

  1. 同步代码一行一行放入call stack中执行
  2. 遇到异步,先记录下,等待时机(定时,网络请求等)
  3. 时机到了,将回调函数移入callback queue
  4. 同步代码执行完,event-loop开始工作,轮询查找callback queue,若callback queue中有回调函数,移入call stack中执行。