JavaScript函数防抖

一、前言

没有前言，就是想整理一篇《函数防抖》和《函数节流》的相关知识，当然在工作和面试中遇到的可能性也是比较大的。废话不多，上正题：

二、什么是函数防抖

**我们设想一个坐电梯的场景：**有一个电梯，容量无限大，但是一次同时只能进入一个人，在打开电梯门之后，5秒就会自动关闭，在第4秒时需要进来多个人，可能刚进一个，电梯门就关了，此时需要重新将电梯门打开，让剩下的人通过。如果一直维持这个进入情况，那么电梯门就会重复关闭再打开，会产生抖动的情况，安全隐患大。
**解决方法，可以设定为：**电梯门打开之后，如果没人进入，5秒后自动关闭，如果有人进来，那么再延迟5秒钟后关闭，每检测到一个人的进入，就重新计时，直到5秒种后，没人进入，再关闭电梯门。这就是一种防抖的处理方式。

函数防抖：当重复触发某一个行为（事件时），只执行最后一次触发。
在电梯事件中，如果没人进入，5秒后关门，如果一直有人进入，那么会在最后一个人进入后的5秒后关门。

三、为什么要函数防抖

某些情况下，浏览器的一些高频事件对于用户来说其实并没有太大必要，比如mousemove，scroll，resize。这种时候，我们可以将多次的重复触发，改成只执行最后一次，以此来提升执行速度，节省资源

四、如何实现函数防抖

实现原理：配合setTimeout。提前定义变量用来保存setTimeout的返回值，在每次重复触发事件，准备开启新的setTimeout之前，先clearTimeout上次的返回值，保证同一时间只有一个setTimeout存在。

var t = null;
document.onmousemove = function (){
    clearTimeout(t);
    t = setTimeout(() => {
        console.log("函数防抖：多次触发只会执行一次");
    }, 300);
}

封装之后：

document.onmousemove = debounce(function(){
    console.log( "函数防抖：多次触发只会执行一次" );
});

function debounce(cd, interval=300){
    var t = null;
    return function(){
        clearTimeout(t);
        t = setTimeout(() => {
            cd.call(this);
        }, interval);
    }
}

五、函数防抖的应用场景

一些高频事件，在被连续触发时，其实只需要生效一次即可，如：

• 搜索框搜索输入：只需用户最后一次输入完，再发送请求
• 以此可以延伸出手机号、邮箱等输入时的实时验证
• 窗口大小事件onresize，只需窗口调整完成后，计算窗口大小，防止重复渲染

---

以上，如有纰漏或不同观点，欢迎留言讨论…