JavaScript 效能最佳化技巧：函數節流

古木天琪 標籤: JavaScript，效能，JS效能，回呼函數，延時函數

函數節流技術的主要思路是，通過一個定時器，阻斷連續重複的函數調用。對於我們自己內部使用的函數，這通常意義不大，也不推薦使用這個技術，它可能會丟失對某些資料的處理。但是對於在使用者介面調用的函數，卻非常有意義。例如一個 mousemove 或者 IE 中 resize 事件的監聽函數。

這類事件監聽函數往往伴隨著兩個主要特徵：1. 短時間內連續多次重複觸發 ; 2. 大量的 DOM 操作。眾所周知，DOM 操作對記憶體和 CPU 的開銷是比較大的，特別是當同時滿足特徵1時，往往給瀏覽器造成不小的壓力。函數節流技術的意義在於在使用者察覺範圍外，降低函數調用的頻率，從而提升效能。

這個技巧的大概模式如下面這樣：

var processor = {    timeoutId: null,                       performProcessing: function(){            // 要執行的代碼    },    process: function(){        clearTimeout(this.timeoutId);        this.timeoutId  = setTimeout(function(){            processor.performProcessing();        }, 100);    }};                   //調用processor.process();

performProcessing 是真正要調用的函數，而程式的入口在 process，每次進入 process，真正要調用的函數 performProcessing 都會被延遲 100 毫秒執行，如果在此期間，process 再次被調用，則會重設前一次的計時器，重新開始計時，這樣保證了 performProcessing 中的代碼至少要間隔 100 毫秒才會被執行一次，原理非常的簡單，下面這個函數也是利用這個原理，通過閉包達到了同樣的目的，它接受兩個參數，第一個是要真正要執行的函數，第二個是間隔的時間。

function throttle(fn, delay) {    var timer = null;    return function () {        var context = this, args = arguments;        clearTimeout(timer);        timer = setTimeout(function () {        fn.apply(context, args);    }, delay);  };}

另外，有人為 jQuery 寫了相同功能的外掛程式：點擊這裡傳送到 jQuery plugins

Google Closure Library 也有類似的 API：點擊這裡傳送到 Google Code