防抖(debounce)和节流(throttle)

Posted 2023-03-22

参考技术A

思路： 在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms

效果： 如果短时间内触发同一个事件，只会执行一次函数

实现： 既然前面都提到了计时，实现的关键是 setTimeout 这个函数，由于需要变量保存计时，考虑维护全局纯净，可以借助 闭包 来实现

注意
防抖定义： 对于短时间内连续触发的事件，防抖的目的就是让某一个时间期限内，事件只触发一次。

根据上面介绍的防抖效果来看

如果产品需求期望处理方案：当不断连续触发改事件，希望在某一个时间间隔后可以触发回调函数？

原理很简单：就像一个类似控制的阀门，我们只需要控制在时间间隔后开启关闭。

效果： 如果短时间内触发一个事件，那么在执行回调函数完毕后，那么回调函数在指定时间内是不能触发的，直到过了这个时间段才可以触发.

实现： 这里借助 setTimeout 实现，需要保存一个变量状态valid表示是否处于工作状态

注意
节流定义：对于短时间内触发事件，节流目的想让触发回调函数的频率降低,在某一时间内回调函数是失效状态。

上述内容主要是介绍debounce和throttle核心思路实现，并代表实际的库。需要借助上下文环境和argument(this指向)。