节流和去抖的核心其实就是限制某一个方法被频繁触发。
- 节流:间隔时间段触发一次
- 去抖:对于一定时间段的连续的函数调用,只让其执行一次,两者有时候不需要细分,节流去抖也可以合在一起。
具体场景
节流 (throttle)
- DOM 元素的拖拽功能实现(mousemove)
- 射击游戏的 mousedown/keydown 事件(单位时间只能发射一颗子弹)
- 计算鼠标移动的距离(mousemove)
- Canvas 模拟画板功能(mousemove)
- 搜索联想(keyup)
- 监听滚动事件判断是否到页面底部自动加载更多:给 scroll 加了 debounce 后,只有用户停止滚动后,才会判断是否到了页面底部;如果是 throttle 的话,只要页面滚动就会间隔一段时间判断一次
防抖(debounce)
- 每次 resize/scroll 触发统计事件
- 文本输入的验证(连续输入文字后发送 AJAX 请求进行验证,验证一次就好)
前端锁(mutex)
前端开发很多时候也需要“锁”,例如:用户连续点击按钮会多次触发click事件、监听鼠标滚动