在学习event-loop
前,首先要知道js
是如何执行的:
- 从前到后,一句一句执行
- 如遇报错,停止执行后续代码
- 先执行同步代码,再执行异步代码
以代码示例,演示Event-loop的执行过程
console.log("Hi");
setTimeOut(function cb1(){
console.log('cb1');
})
console.log("world");
首先来了解下每个模块的意思:
上述代码的执行过程为:
- 先将
console.log("Hi");
放入Call stack
中,执行完成之后,清空call stack
- 将
setTimeOut(cb1)
放入call Stack
中,由于setTimeOut
是异步操作,所以会在web APIS
中设置一个定时器,最后将call stack
清空
- 再将
console.log("world");
放入call Stack
中,执行。
- 这时候,同步代码已经执行完毕了,
Event-Loop
会去callback queue
中去查找,若有回调函数,移入Call stack
中执行。
- 执行完毕之后,清空
call stack
总结
event-loop的执行过程:
- 同步代码一行一行放入
call stack
中执行 - 遇到
异步
,先记录
下,等待时机(定时,网络请求等) - 时机到了,将回调函数移入
callback queue
中 - 同步代码执行完,event-loop开始工作,
轮询
查找callback queue
,若callback queue
中有回调函数,移入call stack
中执行。