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