前置——认识防抖节流函数
JavaScript是事件驱动的，大量的操作会触发事件，加入到事件队列中处理。
对于某些频繁的事件处理会造成性能的损耗，我们就可以通过防抖和节流来限制事件频繁的发生；
防抖函数（debounce）
防抖的过程：
- 当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间；
- 当事件密集触发时，函数的触发会被频繁的推迟；
- 只有等待了一段时间也没有事件触发，才会真正的执行响应函数；
应用场景：
- 输入框中频繁的输入内容，搜索或者提交信息；
- 频繁的点击按钮，触发某个事件；
- 监听浏览器滚动事件，完成某些特定操作；
- 用户缩放浏览器的resize事件；
节流函数（throttle）
节流的过程 ：
- 当事件触发时，会执行这个事件的响应函数；
- 如果这个事件会被频繁触发，那么节流函数会按照一定的频率来执行函数；
- 不管在这个中间有多少次触发这个事件，执行函数的频率总是固定的；
应用场景：
- 监听页面的滚动事件；
- 鼠标移动事件；
- 用户频繁点击按钮操作；
- 游戏中的一些设计；
生活中防抖的例子
比如说有一天我上完课，我说大家有什么问题来问我，我会等待五分钟的时间。
如果在五分钟的时间内，没有同学问我问题，那么我就下课了；
- 在此期间，a同学过来问问题，并且帮他解答，解答完后，我会再次等待五分钟的时间看有没有其他同学问问题；
- 如果我等待超过了5分钟，就点击了下课（才真正执行这个时间）；
:::info
防抖就相当于游戏里的回城，假设回城需要5s的时间，被打断之后就只能再等5s
:::
生活中节流的例子
比如说有一天我上完课，我说大家有什么问题来问我，但是在一个5分钟之内，不管有多少同学来问问题，我只会解答一个问题； （相当于5分钟回答一个问题，有固定频率）
如果在解答完一个问题后，5分钟之后还没有同学问问题，那么就下课；
使用第三方库实现防抖节流操作
:::info
使用的是underscore第三方库
Underscore的官网： https://underscorejs.org/
:::
<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 = 0
const inputChange = function(event) {
console.log(`发送了第${++counter}次网络请求`)
}
// 防抖处理
inputEl.oninput = _.debounce(inputChange, 2000)
// 节流处理
inputEl.oninput = _.throttle(inputChange, 2000)
</script>