Javascript防抖函数节流函数的介绍(最详细)、彻底搞懂防抖节流的区别以及使用第三方库的防抖节流函数

悠悠 2023-09-28 13:09 66阅读 0赞

#### 文章目录 ####

*   *  1.防抖节流函数介绍
     *   *  1.1 认识防抖节流函数
         *  1.2 认识防抖函数
         *  1.3 防抖函数应用
         *  1.4 认识节流函数
         *  1.5 节流函数应用
         *  1.6 生活中的例子
     *  2.Underscore库
     *   *  2.1 Underscore库的介绍
         *  2.2 案例准备
         *  2.3 Underscore实现防抖
         *  2.4 Underscore实现节流

### 1.防抖节流函数介绍 ###

> 什么是防抖节流函数, 我先举个例子给大家
> 
> **防抖的例子**:
> 
>  *  比如你给一个女生发消息, 当五分钟内她没有回复, 你就会把她好友删除
>  *  如果5分钟内她有回复你, 你回给她回一个消息并且又开始5分钟的等待
>  *  如果有等待超过5分钟, 她还没有恢复你消息, 你就会把这个女生的好友删除
> 
> **节流的例子**:
> 
>  *  比如有一个男生, 他给女孩子发消息, 在五分钟内不管男生发了多少消息, 女生只会回复一条
>  *  回复完之后, 男生在下一个5分钟又发了很多很多消息, 女生还是只回复一条, 每一个五分钟都如此, 女生只回复一条消息
>  *  直到有一天男孩死心了, 没有再给女生发消息, 那么女生也自然不会回复消息
> 
> 理解上面的思想, 就能明白的区分什么是防抖什么是节流了

#### 1.1 认识防抖节流函数 ####

**防抖和节流的概念其实最早并不是出现在软件工程中，防抖是出现在电子元件中，节流出现在流体流动中**

*  而JavaScript是事件驱动的，大量的操作会触发事件，加入到事件队列中处理。
 *  而对于某些频繁的事件处理会造成性能的损耗，我们就可以通过防抖和节流来限制事件频繁的发生；

**防抖和节流**函数目前已经是前端实际开发中两个非常重要的函数，也是**面试经常被问到的面试题**。

> **但是很多前端开发者面对这两个功能，有点摸不着头脑**：
> 
>  *  某些开发者根本无法区分防抖和节流有什么区别（面试经常会被问到）；
>  *  某些开发者可以区分，但是不知道如何应用；
>  *  某些开发者会通过一些第三方库来使用，但是不知道内部原理，更不会编写；

**接下来我们会一起来学习防抖和节流函数**：

*  我们不仅仅要区分清楚防抖和节流两者的区别，也要明白在实际工作中哪些场景会用到；
 *  并且我会带着大家一点点来编写一个自己的防抖和节流的函数，不仅理解原理，也学会自己来编写；

#### 1.2 认识防抖函数 ####

**我们用一副图来理解一下它的过程**：

*  当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间；
 *  当事件密集触发时，函数的触发会被频繁的推迟；
 *  只有等待了一段时间也没有事件触发，才会真正的执行响应函数；

![在这里插入图片描述][f73959f924054dbeac6de57da74c2796.png_pic_center]

> 防抖的应用场景很多：
> 
>  *  输入框中频繁的输入内容，搜索或者提交信息；
>  *  频繁的点击按钮，触发某个事件；
>  *  监听浏览器滚动事件，完成某些特定操作；
>  *  用户缩放浏览器的resize事件；

#### 1.3 防抖函数应用 ####

> 我们通过一个实际案例的应用来认识防抖函数是做什么的, 它有什么用处?

我们都遇到过这样的场景，在**某个搜索框中输入自己想要搜索的内容**(例如淘宝、京东), 我们在输入框对应的内容后, **会根据我们输入的内容显式提示信息**：

![在这里插入图片描述][3051191f1ecf4bb49a83e025761af3e4.png_pic_center]

**比如我想要搜索adidas**

*  我输入a时，为了更好的用户体验，通常会出现对应的联想内容，**这些联想内容通常是保存在服务器的，所以需要一次网络请求**；
 *  继续输入ad时，再次发送网络请求；
 *  那么**adidas一共需要发送6次网络请求**；
 *  这大大损耗我们整个系统的性能，无论是前端的事件处理，还是对于服务器的压力;

**但是我们需要这么多次的网络请求吗？**

*  答案肯定是不需要，正确的做法应该是在合适的情况下再发送网络请求；
 *  比如如果用户快速的输入一个adidas，那么只需要发送一次网络请求；
 *  比如如果用户是输入一个a之后, 停下来想了一会儿，这个时候a确实应该发送一次网络请求；
 *  也就是我们应该监听用户在某个时间，比如500ms内，是否有再次触发事件，如果没有再发送网络请求；

**类似上面这样的操作就是防抖**：**只有在某个时间内，没有再次触发某个函数时，才真正的调用这个函数**；

#### 1.4 认识节流函数 ####

**我们用一副图来理解一下节流的过程**

*  当事件触发时，会执行这个事件的响应函数；
 *  如果这个事件会被频繁触发，那么节流函数会按照一定的频率来执行函数；
 *  不管在这个中间有多少次触发这个事件，执行函数的频繁总是固定的；

![在这里插入图片描述][756febd94ca941e4856c7a070e5043a3.png_pic_center]

> **节流的应用场景**：
> 
>  *  监听页面的滚动事件；
>  *  鼠标移动事件；
>  *  用户频繁点击按钮操作；
>  *  游戏中的一些设计；

#### 1.5 节流函数应用 ####

> 我们同样通过一个实际案例的应用来认识节流函数又是做什么的, 它又有什么用处?

**很多人都玩过类似于飞机大战的游戏**

**在飞机大战的游戏中，我们按下空格会发射一个子弹** :

*  很多飞机大战的游戏中会有这样的设定，即使按下的频率非常快，子弹也会保持一定的频率来发射；
 *  比如1秒钟只能发射一次，即使用户在这1秒钟按下了10次，子弹会保持发射一颗的频率来发射；
 *  但是事件是触发了10次的，响应的函数只触发了一次；

**在例如王者荣耀游戏中:**

*  王者荣耀游戏中有一个普通攻击键, 无论你点击的频率有多快, 他都只会按照他设定的频率攻击
 *  而并不是你一秒内点击了100次攻击键, 英雄就会在一秒内攻击100次

**类似于上面这样的操作就是节流**

#### 1.6 生活中的例子 ####

**下面是coderwhy老师他举的生活中防抖节流的例子, 我觉得很形象, 分享给大家帮助理解**

> **生活中防抖的例子**：
> 
> 比如说有一天我上完课，我说大家有什么问题来问我，我会等待五分钟的时间。
> 
> 如果在五分钟的时间内，没有同学问我问题，那么我就下课了；
> 
>  *  如果在此期间，a同学过来问问题，并且帮他解答，解答完后，我会再次等待五分钟的时间看有没有其他同学问问题；
>  *  如果我等待超过了5分钟，就点击了下课（才真正执行这个事件）；

> **生活中节流的例子**：
> 
>  *  比如说有一天我上完课，我说大家有什么问题来问我，但是在一个5分钟之内，不管有多少同学来问问题，我只会解答一个问题；
>  *  如果在解答完一个问题后，下一个5分钟之内同样, 不管有多少同学来问问题，我依然只会解答一个问题, 依次循环
>  *  直到解决完问题5分钟之后, 没有同学问问题，那么就下课；

### 2.Underscore库 ###

#### 2.1 Underscore库的介绍 ####

**事实上我们可以通过一些第三方库来实现防抖操作**:

*  lodash
 *  underscore

**这里使用underscore**

*  我们可以理解成lodash是underscore的升级版，它更重量级，功能也更多；
 *  但是目前我看到underscore还在维护，lodash已经很久没有更新了；

官网链接给到大家, [Underscore的官网][Underscore] ： https://underscorejs.org/

Underscore的安装有很多种方式：

*  下载Underscore，本地引入；
 *  通过CDN直接引入；
 *  通过包管理工具（npm）管理安装；

这里我演示的是直接通过CDN:

*  如果失效去官网复制即可

#### 2.2 案例准备 ####

我们通过一个搜索框来延迟防抖函数的实现过程：

*  监听input的输入，通过打印模拟网络请求
    
        <input type="text" />
        <script>
          const inputEl = document.querySelector("input");
        
          // 定义一个监听函数
          let counter = 1;
          function searchChange() {
                
            console.log(`第${ counter++}次网络请求`, this.value);
          }
        
          inputEl.oninput = searchChange;
        </script>

测试发现快速输入一个adidas共发送了6次请求，显然我们需要对它进行防抖操作：

![在这里插入图片描述][4ad45b1231d04d38988a5e0ab7f73641.png_pic_center]

#### 2.3 Underscore实现防抖 ####

我们可以使用第三方库Underscore的\_.debounce方法实现防抖

<input type="text" />
    
    <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>
    <script>
      const inputEl = document.querySelector("input");
    
      // 定义一个监听函数
      let counter = 1;
      function searchChange() {
          
        console.log(`第${ counter++}次网络请求`, this.value);
      }
    
      // inputEl.oninput = searchChange;
    
      // 实现防抖
      inputEl.oninput = _.debounce(searchChange, 500);
    </script>

当我们使用第三方库实现防抖之后, **快速输入adidas只会进行一次网络请求**

![在这里插入图片描述][049b820b851c41759e55e78a9274a3ce.png_pic_center]

#### 2.4 Underscore实现节流 ####

我们同样使用这个案例, 通过第三方库的\_.throttle方法实现节流试一下吧

<input type="text" />
    
    <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>
    <script>
      const inputEl = document.querySelector("input");
    
      // 定义一个监听函数
      let counter = 1;
      function searchChange() {
        
        console.log(`第${
          counter++}次网络请求`, this.value);
      }
    
      // inputEl.oninput = searchChange;
    
      // 实现节流
      inputEl.oninput = _.throttle(searchChange, 500);
    </script>

当我们使用第三方库实现了节流, 我们会发现无论输入的速度多快, **网络请求总是500毫秒打印一次**

![在这里插入图片描述][9e592cbe9c15451ba6ee631d4d5f6ce1.png_pic_center]

[f73959f924054dbeac6de57da74c2796.png_pic_center]: https://img-blog.csdnimg.cn/f73959f924054dbeac6de57da74c2796.png#pic_center
[3051191f1ecf4bb49a83e025761af3e4.png_pic_center]: https://img-blog.csdnimg.cn/3051191f1ecf4bb49a83e025761af3e4.png#pic_center
[756febd94ca941e4856c7a070e5043a3.png_pic_center]: https://img-blog.csdnimg.cn/756febd94ca941e4856c7a070e5043a3.png#pic_center
[Underscore]: https://underscorejs.org/
[4ad45b1231d04d38988a5e0ab7f73641.png_pic_center]: https://img-blog.csdnimg.cn/4ad45b1231d04d38988a5e0ab7f73641.png#pic_center
[049b820b851c41759e55e78a9274a3ce.png_pic_center]: https://img-blog.csdnimg.cn/049b820b851c41759e55e78a9274a3ce.png#pic_center
[9e592cbe9c15451ba6ee631d4d5f6ce1.png_pic_center]: https://img-blog.csdnimg.cn/9e592cbe9c15451ba6ee631d4d5f6ce1.png#pic_center