Debounce and Throttle
防抖和节流是两种类似的技术,用于控制函数在一段时间内的执行次数。
Debounce
:防抖就是进行重复相同操作时,只执行最后一次。
Debounce
的应用场景:
- 监听浏览器窗口的
resize
事件(不管窗口怎么变化,只执行最后一次,所以每次触发浏览器的resize事件时,应该重新触发回调函数,即响应事件)
在
JavaScript高级程序设计
中对于resize
事件有这么一段话:
无论如何,都应该避免在这个事件处理程序中执行过多计算。否则可能由于执行过于频繁而导致浏览器响应明确变慢。
所以我们应当尽量地减少由于用户频繁操作而触发resize事件所带来的性能影响。
- 在带有
Ajax
请求的input
上输入实时搜索事件(不管输入什么,只在用户停止输入时才发送请求)
Throttle
:节流就是在一段时间内如果进行重复操作时,只执行一次,比如两秒内的点击事件,无论点多少次,两秒内只执行一次。
Throttle
的应用场景:
- 下拉加载更多(无限滚动)事件