函數節流背後的基本思想是指，某些代碼不 可以在沒有間斷的情況連續重復執行。第一次調用函數，創建一個定時器，在指定的時間間隔之後執行代碼。當第二次調用該函數時，它會清楚前一次的定時器並設置另一個。如果前一個定時器已經執行過了，這個操作就沒有任何意義然而，如果前一個定時器尚未執行，其實就是將其替換為一個新的定時器。目的是只有在執行函數的請求停止了一段時間之後才執行。

//如果沒有第二個參數，那麽就在全局作用域內執行該方法

function throttle(method,context){

　　clearTimeout(method.tId);

　　method.tId=setTimeout(function(){

　　　　method.call(context);

　　},
 
100);

}

 

function resizeDiv(){

　　var div=document.getElementById(‘myDiv‘);

　　div.style.height=div.offsetWidth+‘px‘;

};

window.onresize=function(){

　　throttle(resizeDiv);

};

另一種寫法（不推薦）

window.onresize=function(){

　　var div=document.getElementById(‘myDiv‘);

　　div.style.height=div.offsetWidth+‘
 
px‘;

};

這段非常簡單的例子有兩個問題可能會造成瀏覽器運行緩慢。首先，要計算offsetWidth屬性，如果該元素或者頁面上其他元素有非常復雜的css樣式，那麽這個過程將會很復雜。其次，設置某個元素的高度需要對頁面進行回流來令改動生效。如果頁面有很多元素同時應用了相當數量的css的話，這有需要很多計算。

以上舉的例子是改變窗口大小，再比如檢索功能，也涉及到節流。

註：只要代碼是周期性執行的，都應該使用節流。

參考書籍：《javascript高級程序設計（第3版）》

js函數節流