函数节流:规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。
函数防抖: 在事件被触发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 事件的监听回调,而这也是函数节流以及去抖多数情况下的应用场景。