參考《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()的執行次數。

函數節流