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

Debounce and Throttle

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

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

Debounce的应用场景:

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

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

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

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

Throttle的应用场景:

  • 下拉加载更多(无限滚动)事件

你可能感兴趣的:(防抖和节流的理解以及应用场景)