如何避免频繁的去执行函数（函数防抖和节流）

怼烎@ 2023-02-28 05:58 25阅读 0赞

我们在平时的前端开发中，会有很多场景会频繁触发事件。比如以下情况：

1.  window对象的resize、scroll事件
2.  拖拽时的mousemove事件
3.  文字输入、自动完成的keyup事件

但是我们有时候，为了避免在某一时间段内事件的频繁使用增加了服务器的压力，我们这个时候就要讲到函数防抖和节流了！

## 函数防抖 ##

函数防抖是指对于当事件在某个时间段被触发后再执行的回调，如果这个时候又重新被触发，则重新开始计时，短时间内多次触发同一事件，只执行最后一次，或者只执行最开始的一次，中间的不执行。

**1). 封装一个函数**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjI0Mzg2_size_16_color_FFFFFF_t_70]

**2). 使用时直接调用（这里我们以鼠标拖拽为例）**  
![在这里插入图片描述][20200720193537349.png]  
这个时候当你鼠标在浏览器中移上去时，不管你怎么移动,只要1s内你鼠标移动了，控制台才会打印num，当过了1s后鼠标移动时再次打印num值。 因为mousemove 事件会耗费系统资源，在很大移动程度上，函数防抖解决了资源的大量消耗，很好的缓解事件频繁触发所带来的压力。  
![在这里插入图片描述][20200720193344498.png]  
**注意：**

*  在实际的应用场景中，大多数情况都会使用事件的第一个参数来获取值，在闭包返回的匿名函数中拥有这个参数，但是函数是在定时器的匿名函数中执行的，所以并不具有这个参数。
 *  如果不使用mouseMove函数直接绑定getNum为点击事件，在getNum中使用console.log(num)打印出来num的值。所以使用了防抖函数以后也要修正这个问题。

## 函数节流 ##

预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。

这里以页面滚动为例，普通的做法就是监听 window 对象的 scroll 事件，然后再函数体中写入判断是否滚动到底部的逻辑：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjI0Mzg2_size_16_color_FFFFFF_t_70 1]

**总的来说，函数防抖（debounce）和 函数节流（throttle）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjI0Mzg2_size_16_color_FFFFFF_t_70]: /images/20230209/5e2f5aa3c75d4c5f9f9842238e5d3687.png
[20200720193537349.png]: /images/20230209/dc84d093474c412fb222e2b541e43f87.png
[20200720193344498.png]: /images/20230209/c43fa09525824cc6af17276b3a8aaf8d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjI0Mzg2_size_16_color_FFFFFF_t_70 1]: /images/20230209/69e2f8cf875c420b85c785d8a83fdef4.png