Menu

30天學會 MooTools 教學(14): 定時器和Hash對象

在今天的教程中，我們將關注兩塊內容：第一個就是.periodical();方法，然後我們再對hash做一個簡介。定時器能比它表面看起來做更 多的事情——定時能定期地觸發一個函數。另一方面，hash則是鍵值對（key/value）的集合。如果你對hash還不熟悉現在也不要著急——我們今 天就會做一個快速簡要的介紹，並且會提供一些延伸閱讀的相關鏈接。就像MooTools中的所有東西一樣，一旦你看到它的正確用法，它使用起來就非常的簡 單，並且不可思議的有用。


.periodical()函數

基本用法

使用這個方法你唯一要做的就是在一個函數的結尾添加.periodical();，那樣你的函數就會定時地觸發。和以前的一樣，有幾個東西你是需要定義的。對於初學者，你需要定義一個你需要使用定時器的函數，還有你需要它多久觸發一次（以毫秒為單位）。 

var periodicalFunction = function(){
    alert('again');
}
 
window.addEvent('domready', function() {
    // 結尾的數字決定了這個函數觸發的時間間隔，以毫秒為單位
    var periodicalFunctionVar = periodicalFunction.periodical(100);
});


內置的.bind()方法

.periodical()方法包含了一個非常好的特性——它可以自動地綁定第二個參數。舉個例子，如果你想從domready的外面傳遞一個參數，你只需要把它作為第二個參數傳進去，你就可以把它綁定到你要定期觸發的函數上了。 

window.addEvent('domready', function() {
    // 給一個變量賦值
    var passedVar = $('elementID');
    // 現在periodicalFunction就可以使用"this"來引用"passedVar"
    var periodicalFunctionVar = periodicalFunction.periodical(100, passedVar);
});


停止一個定時觸發的函數

$clear()

一旦你初始化了一個定時觸發的函數（就像我們上面所做的那樣），如果你想停止它，你可以使用$clear();方法，它使用起來非常簡單： 

// 我們傳遞那個我們使用了定時器函數的定時器變量
$clear(periodicalFunctionVar);


代碼示例

為把這所有的連貫起來，我們就用我們目前學過的一些東西（也有一些是沒有學過的）來創建一個定時器。首先，建立一個定時器的HTML頁面，我們還需 要一個開始按鈕，一個停止按鈕，還有一個重置按鈕。另外，我們還要創建一個條形塊，它可以隨著時間慢慢變長。最後，我們還需要一個地方來顯示當前已經運行 的時間。 

<button id="timer_start">start</button>
<button id="timer_stop">pause</button>
<button id="timer_reset">reset</button>
 
<div id="timper_bar_wrap">
    <div id="timer_bar"> </div>
</div>
 
 
<div id="timer_display">0</div>

 

現在該是MooTools的代碼了： 

var timerFunction = function(){
    // 每次當這個函數被調用時
    // 變量currentTime就會增加一
    // 同時要注意一下"this.counter"的使用
    // "this"是hash
    // 而"counter"是key
    var currentTime = this.counter++;
    // 這裡我們改變顯示時間的div裡面的內容
    $('timer_display').set('text', currentTime);
    // 這裡改變樣式表的width屬性，可以輕鬆地創建一個時間進度條
    $('timer_bar').setStyle('width', currentTime);
}
 
window.addEvent('domready', function() {
    // 這是一個簡單的hash對象
    // 只有一個鍵值對（key/value pair）
    var currentCounter = new Hash({counter: 0});
    // 我們初始化我們的定時器並傳入和綁定hash變量
    var simpleTimer = timerFunction.periodical(100, currentCounter); 
 
    // 由於我們不想在onload的時候就啟動定時器
    // 因此我們在這裡要停止這個定時器
    $clear(simpleTimer);
 
    // 在開始按鈕上添加一個事件
    // 在這裡再次啟動這個定時器
    $('timer_start').addEvent("click", function(){
        simpleTimer = timerFunction.periodical(100, currentCounter);
    });
 
    // 在這裡清除定時器
    // 並是時間條閃亮一下
    $('timer_stop').addEvent("click", function(){
        $clear(simpleTimer);
        $('timer_bar').highlight('#EFE02F');
    });
 
    $('timer_reset').addEvent("click", function(){
        // 重置按鈕首先清除這個定時器
        $clear(simpleTimer);
        // 然後把counter設為0
        // 這個稍後再詳細講
        currentCounter .set('counter', 0);
        //
        $('timer_display').set('text', currentCounter.counter);
        $('timer_bar').setStyle('width', 0);
    });
});

Hash快速入門

創建一個hash

在上面的例子中，可能有一些東西是你從來沒有見過的。首先，我們使用了hash。hash是一個由鍵值對（key/value）組成的集合，它和一個包含許多對象的數組類似，不過這些對象都只有一個屬性。我們先來看一下如何建立一個hash： 

var hashVar = new Hash({
     'firstKey': 0,
     'secondKey': 0
});

你需要把鍵（key）放在左邊，而值（value）放在右邊（除了那些對hash很熟悉的人外，我們只講一些關於hash最基本的東西，我們會在以 後將類時再來講hash的存儲功能）。不管怎樣，使用和這類似的系統還是又很多好處的。首先，你可以在一個對象中存儲多個集合，存取變得容易得多，對於組 織複雜的數據組織起來。


.set()方法和.get()方法

你也可以在hash中使用你熟悉的.set()和.get()方法。當你需要設置的時候，你聲明一個鍵（key），然後是你要設置的值。當你需要獲取的時候，你值需要聲明你要獲取的鍵（key）就行了。就這麼簡單。 

// 還是使用上面的hash
// 這裡我們設置firstKay的值為200
hashVar.set('firstKey', 200);
 
// 這裡我們獲取firstKey的值，現在是200
var hashValue = hashVar.get('firstKey');

你可以可以通過引用hash.鍵名來獲取一個值： 

var hashValue = hashVar.firstKey;
// 上面的和下面的一樣
var hashValue = hashVar.get('firstKey');


添加一個新的鍵值對到hash中

.extend();方法

你可以通過.extend();方法來添加一個或者多個新的鍵值對（key/value pair）集合到hash中。首先，我們要創建一個新的鍵值對對象。 

// 這是一個普通的對象
// 它包含鍵值對（key/value pairs）
// 但是沒有hash的功能
var genericObject = {
    'third': 450,
    'fourth': 89
};

如果我們要把這個集合加入到我們已經存在的hash中，我們只需要使用.extend();方法來擴展hash就行了： 

//現在hashVar包含了genericObject中的所有鍵值對
hashVar.extend(genericObject);

注意：任何重複的鍵都將會被後面的設置覆蓋掉。因此，如果你在原始的hash中有"firstKey":"letterA"這樣一對，然後你又擴展了一對"firstKey":"letterB"，這樣你在hash中的讀取結果將是"firstKey":"letterB"。


合併兩個hash

.combine();方法

這個方法可以讓你合併兩個hash對象，如果有重複的鍵將保留原始的值。其餘的則和.extend()方法一樣。


從hash中刪除一個鍵值對

.erase();方法

我們已經見過這個方法一次了。它的工作就和你期望的那樣。你聲明一個hash，然後在後面副加上.erase();，最後你再把「鍵」（key）放在括號裡面。 

hashVar.erase('firstKey');

hash和.each()方法

hash和.each()方法又一種特別的關係，當你遍歷一個hash的時候，遍歷的函數將把「值」（value）作為第一個參數傳遞，而把「鍵」（key）作為第二個參數傳遞——這和你在數組上使用.each的時候一樣，它把每個「項」（item）作為第一個參數。 

hashVar.each(function(value, key) {
    // 這將為hash中的每一個鍵值對彈出一個對話框
    alert(key + ":" + value);
});


更多學習

我們目前為止要講的關於hash的內容就這麼多了。由於這個系列教程中我們會更深入的學習，在以後我們將找一些機會來講有關hash的更多功能。但 是現在，如果你是初學者，我們只是希望你能對hash有一個基本的概念。很快我們就要講解類（class）了，那個時候所有的東西才會串連起來。同時，閱 讀一下文檔中有關hash的這一節。

下載一個包含你開始所需要的所有東西的zip包
包括MooTools 1.2的核心庫，上面的示例，一個外部的JavaScript文件，一個簡單的HTML頁面和一個CSS文件。

 

Mootools 教學列表：