函数节流和防抖

函数节流

定义：在指定时间内，函数只触发一次。
通常场景: 滚动条事件 或者 resize 事件。

var throttle1 = function(fn, interval){
    var prevTime;
    return function(){
        var nowTime = Date.now();
        if(!prevTime || nowTime - prevTime >= interval){
            fn.call(this);
            prevTime = nowTime;
        }

    }
}
var callApi = function(){
    console.log('call api', this)
}
var throttleCallApi = throttle1(callApi, 1000)
document.getElementById('btn').onclick = throttleCallApi

var throttle2 = (function(){
    var prevTime;
    return function(fn, interval){
        var nowTime = Date.now();
        if(!prevTime || nowTime - prevTime >= interval){
            fn();
            prevTime = nowTime;
        }
    }
})();

document.getElementById('btn').onclick = function(){
    var that = this
    throttle2(function(){
        console.log('call api', that, this)
    },1000);
}

推荐第一种写法

函数防抖

定义：在 n 秒内函数只执行一次，如果在 n 秒内又触发了事件，则重新计算函数执行时间。将多次高频操作优化为只在最后一次执行，
通常场景是：用户输入，只需再输入完成后做一次输入校验即可。

var debounce = function(fn ,delay){
    var timerId;
    return function(){
        clearTimeout(timerId)
        var that = this
        timerId = setTimeout(function(){
            fn.apply(that)
        }, delay)
    }
}

document.getElementById('btn').onclick = debounce(function(){
    console.log('do something', this)
} , 500)