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

文章目录

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 认识防抖函数

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

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

防抖的应用场景很多：

输入框中频繁的输入内容，搜索或者提交信息；

频繁的点击按钮，触发某个事件；

监听浏览器滚动事件，完成某些特定操作；

用户缩放浏览器的resize事件；

1.3 防抖函数应用

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

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

比如我想要搜索adidas

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

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

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

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

1.4 认识节流函数

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

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

节流的应用场景：

监听页面的滚动事件；

鼠标移动事件；

用户频繁点击按钮操作；

游戏中的一些设计；

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的官网： 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次请求，显然我们需要对它进行防抖操作：

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只会进行一次网络请求

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毫秒打印一次