Javascript的防抖/限流

更新于 2025-04-25

1、防抖

function debounceFunction(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 = debounceFunction(function(name){
        console.log(name);
    }, 500);

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

2、限流

function throttleFunction(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 = throttleFunction(function(name){
        console.log(name);
    }, 500);

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

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

浙ICP备19039918号-1