防抖节流函数

---

theme: channing-cyan

跟着coderwhy学习

1.认识防抖和节流函数

• 我们用一副图来理解一下它的过程：
  • 当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间；
  • 当事件密集触发时，函数的触发会被频繁的推迟；
  • 只有等待了一段时间也没有事件触发，才会真正的执行响应函数；

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

2.防抖函数的案例

• 我们都遇到过这样的场景，在某个搜索框中输入自己想要搜索的内容：
• 比如想要搜索一个MacBook：
  • 当我输入m时，为了更好的用户体验，通常会出现对应的联想内容，这些联想内容通常是保存在服务器的，所以需要一次网络请求；
  • 当继续输入ma时，再次发送网络请求；
  • 那么macbook一共需要发送7次网络请求；
  • 这大大损耗我们整个系统的性能，无论是前端的事件处理，还是对于服务器的压力;
• 但是我们需要这么多次的网络请求吗？
  • 不需要，正确的做法应该是在合适的情况下再发送网络请求；
  • 比如如果用户快速的输入一个macbook，那么只是发送一次网络请求；
  • 比如如果用户是输入一个m想了一会儿，这个时候m确实应该发送一次网络请求；
  • 也就是我们应该监听用户在某个时间，比如500ms内，没有再次触发时间时，再发送网络请求；
• 这就是防抖的操作：只有在某个时间内，没有再次触发某个函数时，才真正的调用这个函数；

3.认识节流throttle函数

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

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

4.节流函数的应用场景

• 很多人都玩过类似于飞机大战的游戏
• 在飞机大战的游戏中，我们按下空格会发射一个子弹：
  • 很多飞机大战的游戏中会有这样的设定，即使按下的频率非常快，子弹也会保持一定的频率来发射；
  • 比如1秒钟只能发射一次，即使用户在这1秒钟按下了10次，子弹会保持发射一颗的频率来发射；
  • 但是事件是触发了10次的，响应的函数只触发了一次；

5.生活中的例子：防抖和节流

生活中防抖的例子： + 比如说有一天老师上完课，老问大家有什么问题来问老师，老师会等待五分钟的时间。 + 如果在五分钟的时间内，没有同学问老师问题，那么就下课了； + 在此期间，a同学过来问问题，并且帮他解答，解答完后，老师会再次等待五分钟的时间看有没有其他同学问问题； + 如果老师等待超过了5分钟，就点击了下课(才真正执行这个时间)； + 生活中节流的例子： + 比如说有一天老师上完课，老师说大家有什么问题来问老师，但是在一个5分钟之内，不管有多少同学来问问题，老师只会解答一个问题； + 如果在解答完一个问题后，5分钟之后还没有同学问问题，那么就下课；

6.案例准备

• 通过一个搜索框来延迟防抖函数的实现过程：
  • 监听input的输入，通过打印模拟网络请求
• 测试发现快速输入一个macbook共发送了7次请求，显示我们需要对它进行防抖操作：

```

```

7.Underscore库的介绍

• 事实上我们可以通过一些第三方库来实现防抖操作：
  • lodash
  • underscore
• 这里使用underscore
  • 我们可以理解成lodash是underscore的升级版，它更重量级，功能也更多；
  • 但是目前我看到underscore还在维护，lodash已经很久没有更新了；
• Underscore的官网： https://underscorejs.org/
• Underscore的安装有很多种方式：
  • 下载Underscore，本地引入；
  • 通过CDN直接引入；
  • 通过包管理工具(npm)管理安装；
• 这里我们直接通过CDN： ```js

```

8.Underscore实现防抖和节流

```js