JS中的函数防抖

JS中的函数防抖

1、什么是函数防抖

概念：函数防抖（debounce），就是指触发事件后在 n 秒内函数只能执行一次，若是在 n 秒内又触发了事件，则会从新计算函数执行时间。

举个栗子，坐电梯的时候，若是电梯检测到有人进来（触发事件），就会多等待 10 秒，此时若是又有人进来（10秒以内重复触发事件），那么电梯就会再多等待 10 秒。在上述例子中，电梯在检测到有人进入 10 秒钟以后，才会关闭电梯门开始运行，所以，“函数防抖”的关键在于，在 一个动做 发生 必定时间 以后，才执行 特定事件。

2、为何须要函数防抖

　　前端开发过程当中，有一些事件，常见的例如，onresize，scroll，mousemove ,mousehover 等，会被频繁地触发，不作限制的话，有可能一秒以内执行几十次、几百次，若是在这些函数内部执行了其余函数，尤为是执行了操做 DOM 的函数（浏览器操做 DOM 是很耗费性能的），那不只会形成计算机资源的浪费，还会下降程序运行速度，甚至形成浏览器卡死、崩溃。这种问题显然是致命的。

除此以外，重复的 ajax 调用不只会形成数据关系的混乱，还会形成网络拥塞，增长服务器压力，显然这个问题也是须要解决的。

3、函数防抖如何解决上述问题

根据上面对问题的分析，细细思索，能够想到以下解决方案。

函数防抖的要点，也是须要一个 setTimeout 来辅助实现。延迟执行须要跑的代码。若是方法屡次触发，则把上次记录的延迟执行代码用 clearTimeout 清掉，从新开始。若是计时完毕，没有方法进来访问触发，则执行代码。

4、函数防抖的代码实现

根据以上分析，咱们对“函数防抖”进行代码实现，以下：

function debounce(fn,wait){
    var timer = null;
    return function(){
        if(timer !== null){
            clearTimeout(timer);
        }
        timer = setTimeout(fn,wait);
    }
}
    
function handle(){
    console.log(Math.random());
}
    
window.addEventListener("resize",debounce(handle,1000));

以上方法本人亲测有效，小伙伴们可放心食用（注意，函数触发方式为“ resize ”，改变窗口大小，观察浏览器控制台的变化）。

5、函数节流的使用场景

函数防抖通常用在什么状况之下呢？通常用在，连续的事件，只需触发一次回调的场景具体有：

1. 搜索框搜索输入。只需用户最后一次输入完，再发送请求
2. 手机号、邮箱验证输入检测
3. 窗口大小 resize。只需窗口调整完成后，计算窗口大小，防止重复渲染。

目前遇到过的用处就是这些了，理解了思路，小伙伴能够把它运用在适当的场合，提升代码质量。

总结

函数防抖实际上是分为 “当即执行版” 和 “非当即执行版” 的，根据字面意思就能够发现他们的差异，所谓当即执行版就是 触发事件后函数不会当即执行，而是在 n 秒后执行，若是在 n 秒内又触发了事件，则会从新计算函数执行时间。 而 “非当即执行版” 指的是 触发事件后函数会当即执行，而后 n 秒内不触发事件才能继续执行函数的效果。。

在开发过程当中，咱们须要根据不一样的场景来决定咱们须要使用哪个版本的防抖函数，通常来说上述的防抖函数都能知足大部分的场景需求。但咱们也能够将非当即执行版和当即执行版的防抖函数结合起来，实现最终的双剑合璧版的防抖函数。