函数节流总结

函数节流
在调用window.onresize事件时，如果操作频繁操作DOM极为耗性能，因此在这种情况下可以通过定时器对该函数进行节流。
函数节流背后的基本思想是：
某些代码不可以在没有间断的情况连续重复执行。
第一次调用函数，创建一个定时器，在指定的间隔之后运行代码。
第二次调用函数，它会清除前一次的定时器并设置另一个。如果前一个定时器执行过了，这个操作就没有任何意义。
然而，如果前一个定时器尚未执行，其实就是将替换为一个新的定时器。
目的是只有在执行函数的请求停止了一段时间之后才执行。以下是该模式的基本形式：

var processor = {
	timeoutId: null,
	//实际进行处理的方法
	performProcessing: function(){
		//实际执行的代码
	},
	//初识处理调用的方法
	process: function(){
		clearTimeout(this.timeoutId);
		var that = this;
		this.timeoutId = setTimeout(function(){
			that.performProcessing();
		},100)
	}
}
processor.process();

process() 初始化任何处理所必须调用的。
performProcessing() 实际进行应完成的处理。

这个模式可以使用throttle()函数来简化，这个函数可以自动进行定时器的设置和清除，如下例所示：

function throttle(method,context){
	clearTimeout(method.tId);
	method.tId = setTimeout(function(){
		method.call(context);
	},100)
}

throttle()函数接受两个参数：

1. method 要执行的函数
2. 在哪个作用域执行

上面这个函数首先清除之前设置的任何定时器。
来看看函数节流的具体应用：

    

       123