函数节流

参考《JavaScript高级程序设计》第三版 第22章 高级技巧

浏览器中某些计算和处理比其他的昂贵的多。 例如， DOM操作比起非DOM交互需要更多的内存和CPU时间。 连续尝试进行过多的DOM相关操作可能会导致浏览器挂起， 有时候甚至崩溃。 尤其IE中使用onresize事件处理程序的时候容易发生， 当调整浏览器大小的时候， 该事件会连续触发。 为了绕开这个问题， 可以使用定时器对该函数进行节流。

函数节流背后的基本思想是指， 某些代码不可以在没有间断的情况连续重复执行。 第一次调用函数，创建一个定时器， 在指定的时间间隔之后运行代码。 当第二次调用该函数时， 会清除前一次的定时器并设置另一个。 目的是只有在执行函数的请求停止了一段时间后才执行。

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

throttle函数接受两个参数， 要执行的函数及作用域， 如果没有第二个参数， 将会在全局作用域执行。

onresize举例：

    
      function handleResize() { 
	// do someting
}
window.onresize = function() {
    handleResize.interval = 100;
	throttle(handleResize);
}
    
  

使用了throttle()函数后， 大大减少了handleResize()的执行次数。

函数节流