前言

在咱们前端编程中，假设咱们要给后端发送恳求，万一手抖多点了几回，多发送了几遍怎么办？

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

今天，咱们就来教咱们手搓“防抖”

正文

为什么要防抖?

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

<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秒内履行一次。

这样咱们就完成了一个防抖，咱们来看看作用！

手把手教你实现JavaScript手搓

防抖的好处

  1. 功能优化：在某些场景下，例如用户在输入框中输入文本时，事情处理函数可能会十分频频地触发。假如这些事情处理函数履行时刻较长，且没有做防抖处理，那么就可能导致浏览器界面卡顿，用户体会欠安。而假如使用了防抖处理，事情处理函数只会在最终一次事情后的必定时刻内履行一次，从而进步了程序的功能。
  2. 避免屡次触发：在一些需要用户输入的状况下，假如用户接连触发事情（例如接连点击按钮），而事情处理函数又没有做防抖处理，就可能会导致一些不希望出现的结果（例如接连发送恳求、接连履行某些操作等）。而假如使用了防抖处理，就能够有效地避免这种状况的产生。
  3. 减少不必要的操作：在一些需要等候用户输入的场景下，假如用户接连触发事情（例如接连点击按钮），而事情处理函数又没有做防抖处理，那么就可能会导致一些不必要的操作被履行（例如接连发送恳求、接连履行某些操作等）。而假如使用了防抖处理，就能够有效地减少这种状况的产生。

最终

好啦！咱们今天的学习就到这儿为止啦！

咱们有任何想法和定见欢迎咱们评论留言哦~

点个小小的赞鼓舞支持一下吧！！

个人gitee库：MycodeSpace: 首要使用的仓库，记载学习coding中的点点滴滴 (gitee.com)