一、为什么要防抖和节流？
我们在开发程序的过程中，可能会频繁的点击某一个事件，或者短时间内请求多次接口，对事件处理函数的频率没有进行限制，从而导致浏览器卡顿或者卡死，导致用户体验非常差。防抖和节流函数就是为了限制函数的执行次数和 短时间内不必要多次执行函数，从而提高项目性能。
二、防抖
防抖就是事件触发n秒后再执行回调函数，但此时在n内，多次触发事件，则重新计时，保证代码只执行一次。
代码：
代码语言：javascript复制function debounce (fn, await) {
let timer = null // 定义一个定时器的变量
return function () { // 用闭包返回一个函数，解决this指向问题
if (timer) { // 如果存在定时器，再次触发事件，则清空定时器，重新计时
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.apply(this, arguments) // 改变执行函数的this指向，将原先执行函数的this指向改为当前环境
}, await) // 延迟多少毫秒执行
}
}
使用场景：
- scroll事件滚动
- 浏览器窗口的缩放resize事件
- 搜索框输入查询的时候
- 表单验证
- 按钮的提交事件
三、节流
当事件触发之后，约定单位时间之内，事件里面的代码最多只能执行 1 次。所以，节流减少了单位时间内代码的执行次数，从而提高性能。
代码：
代码语言：javascript复制 function throttle (fn, await) {
let timer = null // 定义一个定时器的变量
return function() { // 用闭包返回一个函数，解决this指向问题
if (!timer) {
time = setTimeout(() => {
fn.apply(this, arguments); //改变this指向
timer = null; // 清空定时器
}, await)
}
}
}
使用场景：
- 触底加载更多/滚动加载更多事件
- 防止重复点击事件
当然也有很多种版本，小编只是实现了个简单的版本，如有想法请大家多多交流指正~~
