前端性能优化--实现防抖

防抖的定义： 防抖是指在一定的时间内再次触发此事件,会清空上次的事件重新开始,如果制定的时间内没有再次触发,那么这个事件才会执行。

应用场景: 搜索（例如百度呀关键字）input不是一改变就向服务器发送请求

下面通过实际的案例带大家一起学习防抖的应用。

没有经过防抖处理的输入框实现效果

<script>
    const uninput = document.getElementById("uninput")
    function inputFun(value){
        console.log("你传入的值为:"+value)
    }
    uninput.addEventListener("keyup",function(e){
        inputFun(e.target.value)
    })
   
   
</script>

每触发一次事件就会得到响应

经过防抖处理后的效果

`

   //防抖函数
   function debounce(fun,delay){
        let timer 
        return function(args){
            clearInterval(timer)
            timer = setTimeout(function(){
                fun(args)
            },delay)
        }
    }`

    function inputFun(value){
        console.log("你传入的值为:"+value)
    }

    const input = document.getElementById("input")    
    const debounceInput = debounce(inputFun,2000)
    input.addEventListener("keyup",function(e){
        debounceInput(e.target.value)
    })
   

`

在2s时间内再次触发keyup事件,会清空上次的事件重新开始,如果制定的时间内没有再次触发,那么这个事件才会执行,最终打印的是最后没有触发事件的结果。

利用了闭包的思想

timer就是闭包函数调用的外部变量

args是每一个function函数都会有的对象，在函数调用时，浏览器每次都会传递进两个隐式参数this和args，封装实参的对象args

函数debounce 返回的匿名函数调用了timer,导致timer脱离debounce函数的作用域存活于内存中，直到匿名函数也执行完毕，才会被回收。故当点击间隔小于delay毫秒时，timer就会不断更新值，导致setTimeout内的匿名函数无法执行(因为setTimeout内的函数会延迟delay毫秒执行)，直到没有新的调用事件时，fun才会正常延迟到delay毫秒后执行。

希望本文能让大家对闭包的思想和防抖的实现有一个清晰的认识，对以后处理前端性能优化问题上有一定的理解。