Javascript的防抖/限流

更新于 2024-01-06

防抖

function lazyFunction(fn, timeout){
    var timer = 0;
    return function(){
        if(timer) window.clearTimeout(timer);
        var args = arguments, that = this;
        timer = window.setTimeout(function(){
            fn.apply(that, args)
        }, timeout);
    };
}
var func = lazyFunction(function(name){
        console.log(name);
    }, 500);

func('test1');
func('test2');
func('test3');
func('test4');
//每调用一次,都重置timer,设置新的timeout,在timeout时间内,连续执行,只执行最后一个超过timeout的方法
//这里只有func('test4');会被执行正常输出结果

限流

function limitFunction(fn, timeout){
    var last_exec = 0;
    return function(){
       var now = +new Date();
       if(now - last_exec < timeout) return;
        last_exec = now;
        fn.apply(this, arguments);
    };
}
var func = limitFunction(function(name){
        console.log(name);
    }, 500);

func('test1');
func('test2');
setTimeout(function(){
    func('test3');
}, 600);
//这里func('test2')不会被执行

至于这两个方法的区别,直观点:
分别用两个方法封装到func,然后鼠标一直点一个按钮执行func。
1、对于防抖,被封装的方法可能永远不会被执行。
2、对于限流,被封装的方法第一次会被执行,然后每当距上次执行时间间隔超过timeout后会被执行一次。