“节流函数”提高性能

浏览器中DOM操作比起非DOM交互需要更多的内存和CUP时间,连续的DOM操作有可能会导致浏览器挂起,甚至崩溃。尤其IE中的onresize事件。
高频率的更改会让浏览器崩溃。为了绕开这个问题,需要使用定时器对此类处理函数进行节流

函数节流背后的基本思想:某些代码不可以在没有间隔的情况下连续重复执行

节流函数实现一般实现:1,定时器控制开关,2.定时清除定时器。

1.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var throttle = {
switch:false,
timer:100,
process:function(method,context){
var self = this;
if(self.switch){
return;
}
self.switch = true;
setTimeout(function(){
self.switch = false;
method.call(context);
},self.timer);
}
}

2.

1
2
3
4
5
6
function throttle(method,context){
clearTimeout(method.flag);
method.flag = setTimeout(function(){
method.call(context);
},100);
}

适用场景:scroll,resize事件还有输入联想词等高频事件。

参考:

https://www.nczonline.net/blog/2007/11/30/the-throttle-function/

https://gist.github.com/derek-watson/3349917

分享到: