js中的防抖函数和节流函数

- 防抖函数

• 定义：
  触发事件停止一定时间后才会执行响应的函数，期间如果重复触发时间，重新计算时间。
• 原理：

维护一个定时器，在delay时间后触发函数，但是在delay时间内再次触发的话，都会清除当前的 定时器重新计时。

• 举例：

防抖函数就像是坐公交，就是一定时间内，如果有人陆续上车，司机就不会开车，只有等一定时间内没人上车了，司机才开车。

• 应用：

常见于用户注册时候的手机号码验证和邮箱验证和页面元素滚动的监听。
以下以页面元素滚动监听的例子，来进行解析：

// 函数防抖
var flag;
    window.onscroll = function(){
        clearTimeout(flag); // 清除定时器
        flag = setTimeout(function(){
            console.log("防抖");
        }, 300);
    };

- 节流函数

• 定义：
  触发事件后，规定的时间间隔内无法连续调用，只有上一次函数执行后，过了规定的时间间隔，才能进行下一次的函数调用。
• 原理：

通过判断是否到达规定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。。

• 举例：

防抖函数就像是坐动车，动车到站(触发事件)打开车门在规定时间允许乘客上下车，如果到了规定时间，就关闭车门，重新开车。

• 应用：

也常用在监听页面元素滚动事件。因为滚动事件，是一个高频触发的事件。
以下还是以页面元素滚动监听的例子，来进行解析：

// 函数节流
    let isRun = false;
    window.onscroll = function(){
        if(isRun){
            // 判断是否在运行，如果在执行中，则直接return
            return;
        }
        isRun = true;
        setTimeout(function(){
            console.log("节流");
            isRun = false;
        }, 300);
    };
    // 函数节流的要点是，声明一个变量当标志位，记录当前代码是否在执行。
    // 如果空闲，则可以正常触发方法执行。
    // 如果代码正在执行，则取消这次方法执行，直接return。

总结

根据实际业务场景，合理的利用 防抖 和 节流 可以优化性能。