浏覽器中某些計算和處理要比其他的昂貴的多。例如，DOM操作比起非DOM交互需要更多的內存和CPU時間。連續嘗試進行過多的DOM相關操作可能會導致 浏覽器掛起，有時候甚至會崩潰。尤其在IE中使用onresize事件處理程序的時候容易發生，當調整浏覽器大小的時候，該事件連續觸發。在 onresize事件處理程序內部如果嘗試進行DOM操作，其高頻率的更改可能會讓浏覽器崩潰。
函數節流背後的基本思想是，某些代碼不可以在沒有間斷的情況連續重復執行。第一次調用函數，創建一個定時器，在指定的時間間隔之後運行代碼。當第二次調用 該函數時，它會清除前一次的定時器並設置另一個。如果前一個定時器已經執行過了，這個操作就沒有任何意義。然而，如果前一個定時器尚未執行，其實就是將其 替換為一個新的定時器。目的是只有在執行函數的請求停止了一段時間之後才執行。
代碼如下:
function throttle ( method , context ){
clearTimeout ( method.tId );
method.tId = setTimeout ( function () {
method.call ( context );
} , 100);
}
應用舉例:
假設有一個<div/>元素需要保持它的高度始終等同於寬度，可作如下編碼:
代碼如下:
function resizeDiv(){
var div = document.getElementById("mydiv");
div.style.height = div.offsetWidth + "px";
}
window.onresize = function(){
throttle(resizeDiv);
}
這裡，調整大小的功能被放入了一個叫做resizeDiv的單獨函數中，然後onresize事件處理程序調用throttle()並傳入 resizeDiv函數，而不是直接調用resizeDiv()。多數情況下，用戶是感覺不到變化的，雖然給浏覽器節省的計算可能非常大。