节流函数和防抖函数

368 阅读1分钟

节流函数

节流即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);
    }
}