节流函数和防抖函数-CSDN博客

节流函数

节流即throttle,规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

function throttle(fn, interval = 300) {
    let canRun = true;
    return function () {
        var context = this
        if (!canRun) return;
        canRun = false;
        setTimeout(() => {
            fn.call(context, arguments);
            canRun = true;
        }, interval);
    };
}
复制代码

防抖函数

debounce 函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。比如坐电梯门要关了，结果有个人又要进来，电梯门就需要重新开关，想象如果有10个人陆陆续续进来，电梯门就会开开关关多次，这样的话还不如固定时间关一次门，用来节省消耗。

function debounce(method,time){
    var timer = null ;
    return function(){
        var context = this;
        //在函数执行的时候先清除timer定时器;
        clearTimeout(timer);
        timer = setTimeout(function(){
            method.call(context, arguments);
        },time);
    }
}
复制代码