防抖(debounce)
n 秒内执行多次同一函数只有最后一次有效。
实现方式:使用计时器,在 n 秒内再执行该函数,如果 n 秒内再次调用该函数,则重置计时器。
节流(throttle)
n 秒内执行多次同一函数只有第一次有效。
实现方式:第一次调用立即执行。使用计时器,如果 n 秒内再次调用该函数,此次调用不执行函数。
比较
- 防抖只有最后一次才有效;节流会有很多次有效(但是频率会被稀释)
- 防抖的函数执行会有延迟;节流的立即执行第一次
想象一个绑定了点击回调函数的按钮,你以极快的速度不停地点击它。
- 如果加了防抖,那么函数一直不会执行。只有当你停下来 n 秒后函数才会执行
- 如果加了节流,那么函数会立即执行,但是后面的函数执行频率会远小于你的点击频率
如果快速记忆呢?很简单:
- 防抖可以保证你最后一次的执行是稳定的,不会出现“抖动”,因此叫做“防抖”。但是防抖不关心“流量”(函数执行的频率),即一直没有“流量”也没有关系,只要最后有一次成功即可。
- 节流限制了频率,但不会出现一直不执行的情况,所以叫做“节流”,也就是说还是会有“流量”。
因此应用起来的区别也很明显了:两者都可以降低频率,如果你想要保证最后一次必须执行,就用防抖;如果想要保证第一次必须执行,就用节流。