描述event-loop(事件轮询)机制

event loop是什么?

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

event loop执行过程

event loop

Browser console 浏览器打印窗口    
Call Stack 调用栈.    
Web APIs 处理定时或异步的API.  
Event Loop 事件轮询.   
Callback Queue 回调函数队列.  

实例:

console.log('Hi');
setTimeout(function cb1() {
    console.log('callback!')
}, 5000);
console.log('Bye')

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

DOM事件与event loop的关系

实例:

console.log('Hi');
$('#btn1').click(function(e){
    console.log('button clicked!')
})
setTimeout(function cb1() {
    console.log('callback!')
}, 5000);
console.log('Bye')
DOM事件在event loop的执行:

同步代码,一行一行放在 Call Stack 执行.
遇到点击事件 ,将点击事件的函数放在 Web APIs ,等待执行.
所有的同步代码执行完,当callStack空了 同步执行结束,
浏览器启动 Event Loop 机制,
开始轮询 Callback Queue
当用户触发点击事件,将Web APIs的 函数推到 Callback Queue.
Event Loop 机制在 Callback Queue 中找到了函数,
并将函数 推到了 Call Stack 中执行函数内容

异步(setTimeout、ajax)等回调,基于Event Loop实现.
DOM事件也使用回调,基于Event Loop实现

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值