文章目录
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:
<script src=“https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js”></script>
- 如果失效去官网复制即可
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毫秒打印一次
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/120113.html