JavaScript 高级函数其他应用 函数节流(3)
日期: 2017-08-09 浏览量: 2841
JavaScript 中函数大多情况下是由用户主动触发的,除非是函数本身的实现不合理,否则我们一般不会遇到性能问题。但是在极少数情况下,函数的触发不是由用户直接控制的。在这种场景下,函数有可能被频繁的调用,而造成大的性能问题。
下面举一些这样的应用场景:
1)window.onresize 事件。我们给window对象绑定了resize事件,当浏览器窗口大小被拖动而改变的时候,这个事件触发的频率非常之高。
2)mousemove 事件。同样,如果我们给一个div节点绑定了拖拽事件,当div节点被拖动时,也会频繁地触发该拖拽事件。
函数节流原理:
在上面我们提到的应用场景中,发现他们面临的共同问题是函数被触发的频率太高。
比如我们在 window.onresize 事件在中,要打印当前 浏览器窗口的大小,在我们通过拖曳来改变窗口大小的时候,打印窗口大小的工作1分钟进行了10次,而我们实际上只需要 2次或者3次。这就需要我们忽略一些请求。比如确保在 500ms 内只打印一次。很显然我们可以借助 setTimeout 来完成这件事情。
setTimeout 说明:setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
函数节流的代码实现:
var throttle = function( fn ,interval ){
var _self = fn,
timer,
firstTime = true;
return function(){
var args = arguments,
_me = this;
if( firstTime ){
_self.apply(_me,args);
return firstTime = false;
}
if( timer ){
retirn false;
}
timer = setTimeout(function(){ clearTimeout(timer);
timer = null;
_self.apply(_me ,args);
},interval || 500);
};
}; window.onresize = thirottle(function(){
console.log(1);
}, 500);
人活着,其实就是一种心态,你若觉得快乐,幸福无处不在;你为自己悲鸣,世界必将灰暗。
阅读排行
最新文章
联系方式
- 邮箱:m18811126599@163.com
- QQ:896956692