基本思想:某些代码不能在没有时间间隔的情况下连续触发。第一次调用函数,会创建一个定时器,在指定的时间间隔之后执行。当第二次调用代码时,会先清除第一次的计时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。下面通过代码来看一下这种形式:
var processor = {
timer = null;
processing: function(){
//实际执行的代码
},
process: function(){
clearTimeout(this.timer);
var that = this;
this.setTimeout(function(){
that.processing();
)},100);
}
}
processor.process();
这段代码中当执行process()时,先清除存好的timer,来阻止之前的调用被执行。然后创建一个新的定时器来执行processing(),也就是真正要运行的代码。由于在setTimeout()中用到的函数的环境总是window,所以必须提前将this保存起来。
这种形式我们可以使用下面的这个函数对它进行简化。
function throttle(method,context){
clearTimeout(method.timer);
method.timer = setTimeout(function(){
method.call(context);
},100);
}
这个函数接收两个参数,分别表示需要执行的代码和执行上下文。当没有传入第二个参数时,就会在全局作用域内执行该方法。
我们都知道,节流在resize事件中是最常用到的。下面我们来看一个例子,假设有一个div元素,我们要求它的高度始终和它的宽度保持一致。我们就可以通过下面这段代码来实现:
window.onresize = function(){
throttle(resizeDiv);
};
function resizeDiv(){
var div = document.getElementById('box');
div.style.height = div.offsetWidth + 'px';
}