函数节流和函数防抖

函数节流：规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

函数防抖： 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。看到一个很便于理解的例子：乘电梯。如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）。

图来源https://mp.weixin.qq.com/s/3FZJ0nQLhj9PCi0pfBjc9A

函数节流（throttle）应用场景

·1.dom元素的拖拽功能实现

2.搜索联想

3.计算鼠标移动的距离

4.监听滚动时间判断是否到页面底部自动加载更多。给scroll加了函数防抖（debounce）后，只有用户停止滚动后，才会判断是否到了页面底部。如果是函数节流（throttle）的话，只要页面滚动就会间隔一段时间判断一次。

函数防抖（debounce）应用场景

1.ajax提交请求（连续输入文字后发送ajax请求进行验证，验证一次就行）。

2.触发resize\scroll事件。

总结

函数节流和函数去抖的核心其实就是限制某一个方法被频繁触发，而一个方法之所以会被频繁触发，大多数情况下是因为 DOM 事件的监听回调，而这也是函数节流以及去抖多数情况下的应用场景。