函數(shù)節(jié)流技術(shù)的主要思路是,通過一個定時器,阻斷連續(xù)重復(fù)的函數(shù)調(diào)用。對于我們自己內(nèi)部使用的函數(shù),這通常意義不大,也不推薦使用這個技術(shù),它可能會丟失對某些數(shù)據(jù)的處理。但是對于在用戶界面調(diào)用的函數(shù),卻非常有意義。例如一個 mousemove 或者 IE 中 resize 事件的監(jiān)聽函數(shù)。
這類事件監(jiān)聽函數(shù)往往伴隨著兩個主要特征:1. 短時間內(nèi)連續(xù)多次重復(fù)觸發(fā) ; 2. 大量的 DOM 操作。眾所周知,DOM 操作對內(nèi)存和 CPU 的開銷是比較大的,特別是當(dāng)同時滿足特征1時,往往給瀏覽器造成不小的壓力。函數(shù)節(jié)流技術(shù)的意義在于在用戶察覺范圍外,降低函數(shù)調(diào)用的頻率,從而提升性能。
這個技巧的大概模式如下面這樣:
1 var processor = {
2 timeoutId: null,
3
4 performProcessing: function(){
5 // 要執(zhí)行的代碼
6 },
7
8 process: function(){
9 clearTimeout(this.timeoutId);
10 this.timeoutId = setTimeout(function(){
11 processor.performProcessing();
12 }, 100);
13 }
14 };
15
16 //調(diào)用
17 processor.process();
performProcessing 是真正要調(diào)用的函數(shù),而程序的入口在 process,每次進(jìn)入 process,真正要調(diào)用的函數(shù) performProcessing 都會被延遲 100 毫秒執(zhí)行,如果在此期間,process 再次被調(diào)用,則會重置前一次的計時器,重新開始計時,這樣保證了 performProcessing 中的代碼至少要間隔 100 毫秒才會被執(zhí)行一次,原理非常的簡單,下面這個函數(shù)也是利用這個原理,通過閉包達(dá)到了同樣的目的,它接受兩個參數(shù),第一個是要真正要執(zhí)行的函數(shù),第二個是間隔的時間。
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