简单的节流函数throttle

最新推荐文章于 2023-11-23 15:06:01 发布

weixin_30577801

最新推荐文章于 2023-11-23 15:06:01 发布

阅读量222

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tangjiao/p/9915537.html

本文介绍了一种在高频触发场景下优化函数调用的策略——节流。通过限制函数的执行频率，有效避免了性能损耗，特别适用于window.resize等事件处理。文章详细解释了节流函数的实现原理及应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在实际项目中，总会遇到一些函数频繁调用的情况，比如window.resize，mouseover，上传进度类似的触发频率比较高的函数，造成很大的性能损耗，这里可以使用节流函数来进行性能优化，主要是限制函数被频繁调用的解决方案：

let throttle = function(fn,interval){
    let __self = fn,timer,firstTime = true;
    return function(){
        var args = arguments,__me = this;
        if(firstTime){
            __self.apply(__me,args);
            return firstTime = false;
        }
        if(timer){
            return false;
        }
        //先执行了一次，firstTime是false,然后500毫秒之后利用定时器再次执行。
        timer = setTimeout(function(){
            clearTimeout(timer);
            timer = null;
            __self.apply(__me,args);
        },interval||500)
    }
}

window.onresize = throttle(function(){
    console.log(1)
},500)