一文教你实现JavaScript防抖优化代码

前言

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

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

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

为什么要防抖

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

<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() {
        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>

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

• 在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等于一个新的定时器。

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

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

防抖的好处

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

到此这篇关于一文教你实现JavaScript防抖优化代码的文章就介绍到这了,更多相关JavaScript防抖内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论