前言

在我们前端编程中，假如我们要给后端发送请求，万一手抖多点了几次，多发送了几遍怎么办？

解决方案：防抖！这种事就要交给我们专业的“防抖”先生来处理！

今天，我们就来教大家手搓“防抖”

正文

为什么要防抖?

就好比我们想象一个场景：当我们在使用我们的页面，我们页面有一个提交数据的按钮！我们每次点击提交按钮，都会向我们的后端服务器发送一个请求！接下来我们来构建一下这样一个简单的页面！

<button id="submit">提交</button>
<script>
let sub = document.getElementById('submit')
sub.addEventListener('click',function(){
console.log('已提交');
})
</script>

这样，我们就实现了一个提交按钮！

想象一下！我们每次点击按钮都会输出一个"已提交"，代表我们向后端服务器发送了一个请求！

这样我们请求发送成功了！但是大家发现没有？如果我们多次点击，就会多次输出“已提交”，也就意味着！我们点了多次，就会向我们的服务器后端发送多个请求!!

这会造成什么后果？

1. 服务器压力增大：假如用户体量一大！在同一段时间内一个人同时发送多个请求给我们后端，每次点击都会向服务器发送一个请求，如果点击的频率过高或者同时点击的人数过多，服务器可能会承受不住压力，导致响应变慢或者服务崩溃。甚至是“冒烟！！”
2. 数据重复：不仅如此，如果请求的内容不包含唯一标识符（例如，时间戳、随机数等），那么后端可能会处理重复的数据。重复处理数据，做了多少无用功？
3. 资源浪费：而且，过多的请求会消耗更多的网络资源，可能会导致网络拥堵，影响其他网络活动，甚至导致网络瘫痪！影响巨大！
4. 用户体验下降 由于服务器的负载增大！还会因为卡顿给用户带来非常糟糕的体验！
5. 安全性问题：如果每次点击都会发送敏感信息（例如，密码、个人信息等），那么可能会增加这些信息被截获的风险。

所以，为了避免这些情况！我们就要用到今天我们要学的手段！！防止抖动!!

如何实现抖动？专业的事要用专业的方法！

当我们处理一些频繁触发的事件时，比如用户输入、滚动等，有时候我们希望在一连串的触发中只执行一次相应的操作，以减轻系统的负担，提高性能。这时，防抖（Debouncing）就成了我们的得力助手。

防抖的概念很容易理解，就好比你在按电梯的按钮。你按了一次，电梯并不会立刻启动，而是等待一段时间，如果在这段时间内有人再按了一次，那么等待的时间就会被重置。只有当一段时间内没有新的按压事件发生，电梯才会启动。

在JavaScript中，防抖通常通过设置一个延迟时间来实现。当事件触发时，我们会等待一段时间，如果在这段时间内没有再次触发事件，那么我们执行相应的操作。

我们来给大家上代码！！再为大家细细解说！

<button id="btn">提交</button>
<script>
let btn = document.getElementById('btn');

function send() {
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(this,...args)
},delay)
}
    
}
</script>

这就是我们防止抖动的效果！为大家解释一下如何实现呢？

1. 在Script中我们用btn获取id='btn'的元素。
2. 接下来我们声明了一个send函数，用于发送请求！console.log('已提交');
3. 我们在用btn添加一个事件监听点击click事件,当监听到点击时候之后运行debounce(send,1000)函数，其中接收两个参数send为之前声明的函数，1000为一个时间，传入定时器为时间1s!
4. 紧接着，我们又定义一个函数debounce(fn,delay)接收两个参数！
5. 在函数体内部，我们又定义了一个变量timer,用_this指向调用这个函数的执行上下文对象，但是addEventListener会把this指向你绑定的对象。
6. 最后，我们返回了一个函数体，在在这个函数体当中，我们用args接收fn接收的参数,也就是send中接收的参数,我们通过一个if语句，判断，如果timer存在，就用clearTimeout()掐灭定时器！再让timer等于一个新的定时器。

这样意味着！如果，用户点击间隔不超过一秒，它可以让一个函数在一段时间内只执行一次，而忽略其他多次调用。这段代码中，当用户点击按钮后，send函数会被延迟执行，具体的延迟时间是1000毫秒（1秒）。当用户连续点击按钮时，send函数只会在最后一次点击后1秒内执行一次。

这样我们就实现了一个防抖，我们来看看效果！

防抖的好处

1. 性能优化：在某些场景下，例如用户在输入框中输入文本时，事件处理函数可能会非常频繁地触发。如果这些事件处理函数执行时间较长，且没有做防抖处理，那么就可能导致浏览器界面卡顿，用户体验不佳。而如果使用了防抖处理，事件处理函数只会在最后一次事件后的一定时间内执行一次，从而提高了程序的性能。
2. 防止多次触发：在一些需要用户输入的情况下，如果用户连续触发事件（例如连续点击按钮），而事件处理函数又没有做防抖处理，就可能会导致一些不希望出现的结果（例如连续发送请求、连续执行某些操作等）。而如果使用了防抖处理，就可以有效地防止这种情况的发生。
3. 减少不必要的操作：在一些需要等待用户输入的场景下，如果用户连续触发事件（例如连续点击按钮），而事件处理函数又没有做防抖处理，那么就可能会导致一些不必要的操作被执行（例如连续发送请求、连续执行某些操作等）。而如果使用了防抖处理，就可以有效地减少这种情况的发生。

最后

好啦！我们今天的学习就到这里为止啦！

大家有任何想法和意见欢迎大家评论留言哦~

作者：Aidan路修远i
链接：
https://juejin.cn/post/7301155038754816052