參考《JavaScript高級程序設(shè)計》第三版 第22章 高級技巧

瀏覽器中某些計算和處理比其他的昂貴的多。 例如， DOM操作比起非DOM交互需要更多的內(nèi)存和CPU時間。 連續(xù)嘗試進行過多的DOM相關(guān)操作可能會導(dǎo)致瀏覽器掛起， 有時候甚至崩潰。 尤其IE中使用onresize事件處理程序的時候容易發(fā)生， 當(dāng)調(diào)整瀏覽器大小的時候， 該事件會連續(xù)觸發(fā)。 為了繞開這個問題， 可以使用定時器對該函數(shù)進行節(jié)流。

函數(shù)節(jié)流背后的基本思想是指， 某些代碼不可以在沒有間斷的情況連續(xù)重復(fù)執(zhí)行。 第一次調(diào)用函數(shù)，創(chuàng)建一個定時器， 在指定的時間間隔之后運行代碼。 當(dāng)?shù)诙握{(diào)用該函數(shù)時， 會清除前一次的定時器并設(shè)置另一個。 目的是只有在執(zhí)行函數(shù)的請求停止了一段時間后才執(zhí)行。

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

throttle函數(shù)接受兩個參數(shù)， 要執(zhí)行的函數(shù)及作用域， 如果沒有第二個參數(shù)， 將會在全局作用域執(zhí)行。

onresize舉例：

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

使用了throttle()函數(shù)后， 大大減少了handleResize()的執(zhí)行次數(shù)。

函數(shù)節(jié)流