淺談JavaScript函數節流_基礎知識

瀏覽器中某些計算和處理要比其他的昂貴的多。例如，DOM操作比起非DOM交互需要更多的記憶體和CPU時間。連續嘗試進行過多的DOM相關操作可能會導致 瀏覽器掛起，有時甚至會崩潰。尤其在IE中使用onresize事件處理程序的時候容易發生，當調整瀏覽器大小的時候，事件連續觸發。在 onresize事件處理程序內部如果嘗試進行DOM操作，其高頻率的變更可能會讓瀏覽器崩潰。
     函數節流背後的基本想法是，某些程式碼不可以在沒有間斷的情況連續重複執行。第一次呼叫函數，建立一個定時器，在指定的時間間隔之後執行程式碼。當第二次呼叫 該函數時，它會清除前一次的計時器並設定另一個。如果前一個定時器已經執行過了，這個操作就沒有任何意義。然而，如果前一個定時器尚未執行，其實就是將其 替換為一個新的定時器。目的是只有在執行函數的請求停止了一段時間之後才執行。
      

複製程式碼 程式碼如下:

 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);
            }

    這裡，調整大小的功能被放入了一個叫做resizeDiv的單獨函數中，然後onresize事件處理程序調用throttle()並傳入 resizeDiv函數，而不是直接調用resizeDiv()。多數情況下，使用者是感覺不到變化的，雖然給瀏覽器節省的計算可能非常大。