浅谈JS的防抖、节流的性能优化,语言较通俗适合入门

防抖和节流是两种常见的JavaScript性能优化技术,主要用于控制频繁触发的事件处理。防抖技术确保在事件触发后的一段延迟时间内,只有最后一次操作会执行函数;而节流则限制了函数在特定时间间隔内的执行次数,确保不会过于频繁。这两种方法在处理如滚动、窗口resize等高频率触发的事件时非常有效,可以避免不必要的计算和提高应用性能。
摘要由CSDN通过智能技术生成

防抖(debounce)

在第一次触发事件时,不立即执行函数,而是给出一个期限值比如200ms,然后:

如果在200ms内没有再次触发滚动事件,那么就执行函数
如果在200ms内再次触发滚动事件,那么当前的计时取消,重新开始计时

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

节流(throttle)

如果在限定时间段内,不断触发滚动事件(比如某个用户闲着无聊,按住滚动不断的拖来拖去),只要不停止触发,理论上就永远不会输出当前距离顶部的距离。
但是如果期望处理方案是:即使用户不断拖动滚动条,也能在某个时间间隔之后给出反馈呢?

其实很简单:我们可以设计一种类似控制阀门一样定期开放的函数,也就是让函数执行一次后,在某个时间段内暂时失效,过了这段时间后再重新激活(类似于技能冷却时间)。

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

更详细的介绍请参考文章:https://segmentfault.com/a/1190000018428170

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值