防抖和节流

两者都是控制事件响应的频繁触发。

区别：

防抖：不管触发频率多大，都在停止触发之后的给定时间触发。
节流：不管触发频率多大，都以恒定频率触发。

 

防抖（debounce）：指触发事件后在n秒内函数只执行一次，如果在n秒内又触发了事件，则会重新计算这次函数的执行时间。

函数防抖的应用场景，最常见的就是用户注册时候的手机号码验证和邮箱验证了。只有等用户输入完毕后，前端才需要检查格式是否正确，如果不正确，再弹出提示语。

var clock; 
$(window).on('scroll',function(){
    if(clock){
        clearTimeout(clock);
    }
    clock = setTimeout(function(){
        start();
    },200);
})

 

节流（throttle）：连续触发事件但是在特定时间内只执行一次函数

函数节流应用的实际场景，多数在监听页面元素滚动事件的时候会用到。因为滚动事件，是一个高频触发的事件。

// 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
    if(!canRun){
        // 判断是否已空闲，如果在执行中，则直接return
        return;
    }

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

 

 

 

原文：https://www.jianshu.com/p/c8b86b09daf0