函数节流与函数防抖

概念

函数防抖（debounce）

当调用动做过n毫秒后，才会执行该动做，若在这n毫秒内又调用此动做则将从新计算执行时间

函数节流（throttle）

预先设定一个执行周期，当调用动做的时刻大于等于执行周期则执行该动做，而后进入下一个新周期

函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率太高致使的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

好比以下的状况：

• window对象的resize、scroll事件
• 拖拽时的mousemove事件
• 文字输入、自动完成的keyup事件

区别

能够拿咱们平时坐电梯为例来形象地表述两者的区别

函数防抖：若是有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时若是又有人进电梯了（在10秒内再次触发该事件），咱们又得等10秒再出发（从新计时）。

函数节流 ：保证若是电梯第一我的进来后，10秒后准时运送一次，这个时间从第一我的上电梯开始计时，不等待，若是没有人，则不运行

实现

函数防抖（debounce）

function _debounce(fn,wait){
    var timer = null;
    return function(){
        clearTimeout(timer)
        timer = setTimeout(()=>{
            fn()
        },wait)
    }
}

function _log(){
    console.log(1)
}
window.onscroll = _debounce(_log,500)

函数节流（throttle）

仔细想一想，上面的防抖方式仍是有必定的缺点。若是页面很长，咱们一直在滚动页面，那_log方法就一直不会被执行。因此咱们能够升级一下上述的防抖方法。

function _throttle(fn,wait,time){
    var previous = null; //记录上一次运行的时间
    var timer = null;

    return function(){
        var now = +new Date();

        if(!previous) previous = now;
        //当上一次执行的时间与当前的时间差大于设置的执行间隔时长的话，就主动执行一次
        if(now - previous > time){
            clearTimeout(timer);
            fn();
            previous = now;// 执行函数后，立刻记录当前时间
        }else{
            clearTimeout(timer);
            timer = setTimeout(function(){
                fn();
            },wait);
        }
    }
}
function _log(){
    console.log(1)
}
window.onscroll = _debounce(_log,500,2000)

其实，这就实现了咱们的函数节流。赶快打开控制台运行一下吧~