Javascript的防抖/限流

最新推荐文章于 2024-08-24 08:07:42 发布

Anlige

最新推荐文章于 2024-08-24 08:07:42 发布

阅读量1.3k

点赞数

分类专栏： JavaScript 文章标签： javascript 防抖限流

本文链接：https://blog.csdn.net/moasp/article/details/119923793

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文深入探讨了JavaScript中的两种函数优化技术——防抖与限流。防抖函数确保在设定的时间间隔内，只执行最后一次调用，而限流函数则保证在特定时间间隔内执行一次函数，即使有多个快速连续调用。通过示例代码展示了这两种技术的工作原理及其区别，适用于优化频繁触发的事件处理，如按钮点击或滚动事件。

摘要由CSDN通过智能技术生成

1、防抖

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');会被执行正常输出结果

2、限流

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')不会被执行