防抖和节流的理解以及应用场景

Debounce and Throttle

防抖和节流是两种类似的技术,用于控制函数在一段时间内的执行次数。

Debounce:防抖就是进行重复相同操作时,只执行最后一次。

Debounce的应用场景:

  • 监听浏览器窗口的resize事件(不管窗口怎么变化,只执行最后一次,所以每次触发浏览器的resize事件时,应该重新触发回调函数,即响应事件)

JavaScript高级程序设计中对于resize事件有这么一段话:
无论如何,都应该避免在这个事件处理程序中执行过多计算。否则可能由于执行过于频繁而导致浏览器响应明确变慢。
所以我们应当尽量地减少由于用户频繁操作而触发resize事件所带来的性能影响。

  • 在带有Ajax请求的input上输入实时搜索事件(不管输入什么,只在用户停止输入时才发送请求)

Throttle:节流就是在一段时间内如果进行重复操作时,只执行一次,比如两秒内的点击事件,无论点多少次,两秒内只执行一次。

Throttle的应用场景:

  • 下拉加载更多(无限滚动)事件
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容