防抖节流

防抖:

定义:当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。

存在的意义:如果事件处理函数调用的频率无限制,会加重浏览器的负担,浏览器的性能是有限的,导致用户体验非常糟糕。需要减少调用频率,同时又不影响实际效果。 

实现效果:如果短时间内大量触发同一事件,只会执行一次函数。

如何实现:利用setTimeout()和clearTimeout() 

节流:

定义:当持续触发事件时,保证一定时间段内只调用一次事件处理函数。

存在的意义:如果事件处理函数调用的频率无限制,会加重浏览器的负担,浏览器的性能是有限的,导致用户体验非常糟糕。需要减少调用频率,同时又不影响实际效果。

实现效果:如果短时间内大量触发同一事件,那么在函数执行一次之后,该函数在指定的时间期限内不再工作,直至过了这段时间才重新生效。

如何实现:利用setTimeout()和clearTimeout() 

差距:

防抖:过了时间才会触发第一次

       常用于:搜索框input事件、页面resize事件、拖动滚动条事件等

                    为什么:因为都是只需要最终值的事件

节流:第一次触发过后 过了时间才会触发第二次

       常用于:按钮、鼠标移动事件等

                    为什么:需要先触发一次

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

奶糖 肥晨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值