javascript函数节流

2017-2-10 hanbin JavaScript

在工作中，很多场景都需要我们进行js的节流。最常见的是屏幕伸缩resize，以及touchmove或者scroll等事件的时候。

 $(window).resize(function(){
            console.log("haorooms window resize");
        })

会发现

这里会输出好多次。我们简单的缩小一下窗口，就会不停的触发！

这样在div很多的时候，页面不停重绘，要是遇到版本比较低的IE等，很可能会出现浏览器崩溃的现象！为了避免这种情况，我们可以用函数节流的方式。基本的思想是：第一次调用函数的时候，我们创建一个定时器，在指定时间间隔之后运行代码，第二次调用的时候，会清楚前一个定时器，并重新设置一个。如果前一个定时器已经执行过了，那么这个操作就没有有意了，如果定时器尚未执行，就会将其替换为一个新的定时器。目的是在执行函数停止了一段时间之后再执行。

用对象的方式可以如下写：

 var haoroomstest={
            timeoutId:null,
            performProcessing:function(){                
                    console.log("resize");            

            },
            process:function(){
                clearTimeout(this.timeoutId);
                var that=this;
                this.timeoutId=setTimeout(function(){
                    that.performProcessing();
                },500)
            }
        }

这样之后，我们再用：

$(window).resize(function(){ haoroomstest.process(); })

这样就会减少请求，减少dom重绘，达到节流的目的！

其他方法

function throttle(method,context){
            clearTimeout(method.tId);
            method.tId=setTimeout(function(){
                method.call(context);
            },100);
        }

 function resizeDIv(){
            console.log("haorooms")
        }

        $(window).resize(function(){
            throttle(resizeDIv)
        })

同样的效果。

分享到： QQ空间新浪微博腾讯微博微信更多

« Flash无法导入mp3文件的解决办法 | Linux命令词典（持续更新中）»

javascript函数节流

日历

存档

最新评论

链接

搜索