Lodash 之 debounce

Posted 2023-03-09

参考技术A

参考：
The Difference Between Throttling and Debouncing
Debouncing and Throttling Explained Through Examples

应用场景：一个典型的应用场景是浏览器窗口中 scrolling 和 resizing，如设置了滚动的监听函数，在滚动 5000px的时候可能会触发 100 次以上的监听事件，如果监听事件做了大量计算或操作很多 DOM 元素，可能就会遇到性能问题。即时搜索也有同样的问题。

相同点：它们是为了解决性能问题而限制基于 DOM 事件的 javascript 的执行次数的两种方式，这是在事件和函数执行之间加的控制，因为 DOM 事件的触发频率是无法控制的。

不同点： Throttling 是限制一个函数能够被执行的最大时间间隔，保证了函数至少每隔 X 毫秒会被调用一次，如每隔 100ms 执行一次函数。 Debouncing 是限制一个函数距上次调用达到一定时间间隔才会被再次调用，相当于连续的事件被分成了一组，只触发一次函数调用，如距上次调用达到 100ms 才会再次执行。

window.requestAnimationFrame(callback) 方法告诉浏览器执行动画并请求浏览器在下一次重绘之前调用函数 callback 来更新动画，返回一个 long 整数的 ID，可以通过传此值到 window.cancelAnimationFrame() 来取消回调函数的执行，注意只是在下一次重绘时调用回调函数。

requestAnimationFrame 的优势，在于充分利用显示器的刷新机制，比较节省系统资源。显示器有固定的刷新频率（60Hz 或 75Hz），requestAnimationFrame 的基本思想就是与这个刷新频率保持同步，利用这个刷新频率进行页面重绘。此外，使用这个API，一旦页面不处于浏览器的当前标签，就会自动停止刷新，这就节省了CPU、GPU和电力。注意 requestAnimationFrame 是在主线程上完成，这也意味着，如果主线程非常繁忙，requestAnimationFrame 的动画效果会大打折扣。

requestAnimationFrame 是限制函数执行次数的另一种方式，可以被认为是 _.throttle(dosomething, 16) ，但是是高保真的，会针对不同设备本身的性能而更精确一些，浏览器内部决定渲染的最佳时机，它可以作为 throttle 的替换。

如果浏览器标签不是激活状态，就不会被执行，虽然对滚动、鼠标或键盘事件没有影响。还有需要考虑浏览器兼容性，node.js 中也没有提供该 API。

最佳实践：使用 requestAnimationFrame 进行重新绘制、计算元素位置或直接改变属性的操作，使用 _.debounce 或 _.throttle 进行 Ajax 请求或添加、移除 class（可以触发 CSS 动画），这时可以设置一个低一些的频率，如 200ms。

这里不再描述 throttle 了，其实 throttle 就是设置了 maxWait 的 debounce，lodash 源码中对 throttle 的实现就是调用了 wait 和 maxWait 相等的 debounce。