函数防抖与节流

背景：项目中遇到了这个一个场景：用户移动端触摸移动时，需要在回调中执行方法，然后发现回调非常频繁，所以需要解决一下如何将回调的频率降低。然后了解到了函数防抖与节流的知识点。

函数防抖

---

函数防抖几个典型的应用场合：mousedown/keydown事件（期望单位时间只能执行一次），input输入框架的格式验证，提交按钮的点击事件

解决这些情况就可以使用函数防抖（debounce）,核心就是限制一个方法的频发触发，防止函数在极短的时间内反复调用，造成资源的浪费。

为了满足这种类型场景，可以设计需要满足以下功能：

1. 调用该函数后，不立即做事，而是一段时间后去做事
2. 如果在等待时间内调用了该函数，则重新开始计时

这样的功能，就叫做函数防抖，其实就是加上一个定时器，规定延迟一定时间去请求接口，防止函数短时间内被调用多次。要完成该函数，需要给予两个条件：

1. 告诉我一段时间后要做什么事（这里应该是一个 callback，即函数作为参数）
2. 告诉我要等待多长时间

根据这几个问题可以封装防抖函数（复杂版+简易版）

调用

函数节流

---

再看节流，throttle。节流的概念可以想象一下水坝，你建了水坝在河道中，不能让水流动不了，你只能让水流慢些。换言之，你不能让用户的方法都不执行。如果这样干，就是debounce了。为了让用户的方法在某个时间段内只执行一次，我们需要保存上次执行的时间点与定时器，通过比较当前时间和上次时间点之间的差值，当差值大于我们设定的gaptime的时候就去调用接口，这样就是每隔gaptime时间就操作一次。

函数节流典型的应用场合：函数节流会用在比input, keyup更频繁触发的事件中，如resize, touchmove, mousemove, scroll。throttle 会强制函数以固定的速率执行。因此这个方法比较适合应用于动画相关的场景。

封装节流函数:

调用：

为了更加形象地说明函数防抖与节流的对比，可以看一下下图：