javascript之函数节流

应用场景:当浏览器执行resize,mousemove,scroll等事件时,浏览器会不停的执行事件函数,对性能消耗太大,此时我们可以考虑采用函数节流来控制性能消耗。

实现思路:

 1 var throttle=function(fn, interval){
 2     var __self=fn; //保存需要被延迟执行的函数引用
 3     var timer=null; //定时器
 4     var firstTime=true; //是否第一次调用
 5     return function(){
 6         var args=arguments;
 7         var __me=this;
 8         if(firstTime) { //如果是第一次调用,不需要延迟执行
 9             __self.apply(__me, args);
10             return firstTime=false;
11         }
12         if(timer) { // 如果定时器还在,说明前一次延迟执行还没有完成
13             return false;
14         }
15         timer=setTimeout(function(){ //延迟一段时间执行
16             clearTimeout(timer);
17             timer=null;
18             __self.apply(__me, args);
19         }, interval || 500);
20     };
21 };

调用方法:

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

总结:在一些对实时性要求不是太高,并且会频繁执行的场景下面,可以考虑采用函数节流的方式来提升性能。

posted @ 2016-05-31 15:27  前端路引  Views(181)  Comments(0Edit  收藏  举报