一、为什么要防抖
就好比我们想象一个场景：当我们在使用我们的页面，我们页面有一个提交数据的按钮！我们每次点击提交按钮，都会向我们的后端服务器发送一个请求！接下来我们来构建一下这样一个简单的页面！
<button id="submit">提交</button>
<script>
let sub = document.getElementById('submit')
sub.addEventListener('click',function(){
console.log('已提交');
})
</script>这样，我们就实现了一个提交按钮！
想象一下！我们每次点击按钮都会输出一个"已提交"，代表我们向后端服务器发送了一个请求！
这样我们请求发送成功了！但是大家发现没有？如果我们多次点击，就会多次输出“已提交”，也就意味着！我们点了多次，就会向我们的服务器后端发送多个请求!!
这会造成什么后果？
- 服务器压力增大：假如用户体量一大！在同一段时间内一个人同时发送多个请求给我们后端，每次点击都会向服务器发送一个请求，如果点击的频率过高或者同时点击的人数过多，服务器可能会承受不住压力，导致响应变慢或者服务崩溃。甚至是“冒烟！！”
- 数据重复：不仅如此，如果请求的内容不包含唯一标识符（例如，时间戳、随机数等），那么后端可能会处理重复的数据。重复处理数据，做了多少无用功？
- 资源浪费：而且，过多的请求会消耗更多的网络资源，可能会导致网络拥堵，影响其他网络活动，甚至导致网络瘫痪！影响巨大！
- 用户体验下降 由于服务器的负载增大！还会因为卡顿给用户带来非常糟糕的体验！
- 安全性问题：如果每次点击都会发送敏感信息（例如，密码、个人信息等），那么可能会增加这些信息被截获的风险。
所以，为了避免这些情况！我们就要用到今天我们要学的手段！！防止抖动!!
二、如何实现防抖
当我们处理一些频繁触发的事件时，比如用户输入、滚动等，有时候我们希望在一连串的触发中只执行一次相应的操作，以减轻系统的负担，提高性能。这时，防抖（Debouncing）就成了我们的得力助手。
防抖的概念很容易理解，就好比你在按电梯的按钮。你按了一次，电梯并不会立刻启动，而是等待一段时间，如果在这段时间内有人再按了一次，那么等待的时间就会被重置。只有当一段时间内没有新的按压事件发生，电梯才会启动。
在JavaScript中，防抖通常通过设置一个延迟时间来实现。当事件触发时，我们会等待一段时间，如果在这段时间内没有再次触发事件，那么我们执行相应的操作。
我们来给大家上代码！！再为大家细细解说！
<button id="btn">提交</button>
<script>
let btn = document.getElementById('btn');
function send(e) {
console.log('已提交');
}
//addEventListener会把this指向你绑定的对象
btn.addEventListener('click', debounce(send,1000))
function debounce(fn,delay) {
let timer;
let _this = this
return function() {
//arguments
let args = arguments
if(timer)clearTimeout(timer);//clearTimeout(timer);掐灭定时器
timer = setTimeout(()=>{
fn.call(this,...args)
},delay)
}
}
</script>这就是我们防止抖动的效果！为大家解释一下如何实现呢？
- 在
Script中我们用btn获取id='btn'的元素。 - 接下来我们声明了一个
send函数，用于发送请求！console.log('已提交'); - 我们在用
btn添加一个事件监听点击click事件,当监听到点击时候之后运行debounce(send,1000)函数，其中接收两个参数send为之前声明的函数，1000为一个时间，传入定时器为时间1s! - 紧接着，我们又定义一个函数
debounce(fn,delay)接收两个参数！ - 在函数体内部，我们又定义了一个变量
timer,用_this指向调用这个函数的执行上下文对象，但是addEventListener会把this指向你绑定的对象。 - 最后，我们返回了一个函数体，在在这个函数体当中，我们用
args接收fn接收的参数,也就是send中接收的参数,我们通过一个if语句，判断，如果timer存在，就用clearTimeout()掐灭定时器！再让timer等于一个新的定时器。 - 在定时器当中，我们会用
.call将我们调用的函数的this显式绑定到_this指向的执行上下文对象，这里指的就是btn。
这样意味着！如果，用户点击间隔不超过一秒，它可以让一个函数在一段时间内只执行一次，而忽略其他多次调用。这段代码中，当用户点击按钮后，send函数会被延迟执行，具体的延迟时间是1000毫秒（1秒）。当用户连续点击按钮时，send函数只会在最后一次点击后1秒内执行一次。
三、防抖好处
- 性能优化：在某些场景下，例如用户在输入框中输入文本时，事件处理函数可能会非常频繁地触发。如果这些事件处理函数执行时间较长，且没有做防抖处理，那么就可能导致浏览器界面卡顿，用户体验不佳。而如果使用了防抖处理，事件处理函数只会在最后一次事件后的一定时间内执行一次，从而提高了程序的性能。
- 防止多次触发：在一些需要用户输入的情况下，如果用户连续触发事件（例如连续点击按钮），而事件处理函数又没有做防抖处理，就可能会导致一些不希望出现的结果（例如连续发送请求、连续执行某些操作等）。而如果使用了防抖处理，就可以有效地防止这种情况的发生。
- 减少不必要的操作：在一些需要等待用户输入的场景下，如果用户连续触发事件（例如连续点击按钮），而事件处理函数又没有做防抖处理，那么就可能会导致一些不必要的操作被执行（例如连续发送请求、连续执行某些操作等）。而如果使用了防抖处理，就可以有效地减少这种情况的发生。