|
2、中央計時器控件
在使用計時器時，出現(xiàn)了一個問題－－在處理大量計時器時如何管理它們。在動畫處理中你嘗試去同步處理大量屬性時就尤其重要，你需要一種方法去管理它們。
你的計時器有一個核心的控制將賦予你很大的權(quán)力和靈活性，即：
- 在某個時刻每個頁面僅一個計時器運(yùn)行；
- 你可以隨時暫停和繼續(xù)計時器；
- 移除回調(diào)函數(shù)不過是小菜一碟。
你也必需認(rèn)識到，增加同步計時器的數(shù)量有可能增加瀏覽器垃圾回收出現(xiàn)的可能性。一般來說，瀏覽器在搜尋并嘗試綁定任何零碎的東西（刪除未使用的變量、對象等）。因為它們通常在正常的Javascript引擎管理之外（通過其它線程），這時定時器的問題就尤為嚴(yán)重。一些瀏覽器能處理這種情況而另外一些瀏覽器會導(dǎo)致長時的垃圾回收循環(huán)出現(xiàn)。你也許會注意到這種問題－－當(dāng)你在一個瀏覽器中看到的是漂亮、平滑的動畫，而在另一個瀏覽器中動畫是走走停停完成的。減少計時器同步應(yīng)用的數(shù)量對此大有裨益（這也是現(xiàn)代瀏覽器引入類似中央計時器控件構(gòu)件的原因）。
讓我們來看一個例子，我們有多個函數(shù)，這些函數(shù)分別對單個屬性產(chǎn)生動畫效果，但它們被一個單獨(dú)的計時器函數(shù)管理。
用計時器隊列控制多重動畫：
<div id="box" style="position:absolute;">Hello!</div>
var timers = {
timerID: 0,
timers: [],
start: function(){
if ( this.timerID )
return;
(function(){
for ( var i = 0; i < timers.timers.length; i++ )
if ( timers.timers[i]() === false ) {
timers.timers.splice(i, 1);
i--;
}
timers.timerID = setTimeout( arguments.callee, 0 );
})();
},
stop: function(){
clearTimeout( this.timerID );
this.timerID = 0;
},
add: function(fn){
this.timers.push( fn );
this.start();
}
};
var box = document.getElementsById("box"), left = 0, top = 20;
timers.add(function(){
box.style.left = left + "px";
if ( ++left > 50 )
return false;
});
timers.add(function(){
box.style.top = top + "px";
top += 2;
if ( top > 120 )
return false;
});
在這我們創(chuàng)建了一個中央控制結(jié)構(gòu)。我們可以添加新的計時器回調(diào)函數(shù)，并可停止和開始它們的執(zhí)行。此外，回調(diào)函數(shù)有能力在任何時候刪除自己，只需簡單的返回“false”即可（這比通常的clearTimeout模式更容易），讓我們逐一分析代碼看看它是如何工作的。
起初，所有回調(diào)函數(shù)連同當(dāng)前計時器的ID（timers.ID）被存儲在一個中央數(shù)組中（timers.timers）。核心內(nèi)容在start()函數(shù)內(nèi)部，在這里我們需要確認(rèn)得是已沒有計時器在運(yùn)行，如果是那樣，就開始我們的中央計時器。
計時器包含一個循環(huán)，它遍歷所有的回調(diào)函數(shù)，并按順序執(zhí)行它們，它還檢查回調(diào)函數(shù)返回的值，如果是“false”，將從執(zhí)行中移除。事實證明，這是計時器管理非常簡單的方式。
有一點(diǎn)非常重要，用這種方式組織計時器會確�；卣{(diào)函數(shù)總是按順序執(zhí)行，那樣，正常的計時器總是得不到保證（瀏覽器一個接一個的選擇執(zhí)行）。
定時器的這種組織方式對于大型應(yīng)用程序或任何形式的真正的Javascript動畫至關(guān)重要，當(dāng)我們討論如何創(chuàng)建跨瀏覽器動畫時，有一種解決方案肯定有助于將來任何形式的應(yīng)用開發(fā)。
出處：
責(zé)任編輯：bluehearts
上一頁 昂貴計算的處理 下一頁 異步測試
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 中央計時器控件
