在今天的教程中，我們將關注兩塊內容：第一個就是.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');
-
- 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(){
-
-
-
-
-
- var currenttime = this.counter++;
-
- $('timer_display').set('text', currenttime);
-
- $('timer_bar').setstyle('width', currenttime);
- }
-
- window.addevent('domready', function() {
-
-
- var currentcounter = new hash({counter: 0});
-
- var simpletimer = timerfunction.periodical(100, currentcounter);
-
-
-
- $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);
-
-
- currentcounter .set('counter', 0);
-
- $('timer_display').set('text', currentcounter.counter);
- $('timer_bar').setstyle('width', 0);
- });
- });
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）就行了。就這么簡單。
參考代碼： [復制代碼] [保存代碼]
- hashvar.set('firstkey', 200);
-
- var hashvalue = hashvar.get('firstkey');
你可以可以通過引用hash.鍵名來獲取一個值：
參考代碼： [復制代碼] [保存代碼]
- var hashvalue = hashvar.firstkey;
- var hashvalue = hashvar.get('firstkey');
添加一個新的鍵值對到hash中
.extend();方法
你可以通過.extend();方法來添加一個或者多個新的鍵值對（key/value pair）集合到hash中。首先，我們要創建一個新的鍵值對對象。
參考代碼： [復制代碼] [保存代碼]
- var genericobject = {
- 'third': 450,
- 'fourth': 89
- };
如果我們要把這個集合加入到我們已經存在的hash中，我們只需要使用.extend();方法來擴展hash就行了：
參考代碼： [復制代碼] [保存代碼]
- 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) {
-
- alert(key + ":" + value);
- });
更多學習
我們目前為止要講的關于hash的內容就這么多了。由于這個系列教程中我們會更深入的學習，在以后我們將找一些機會來講有關hash的更多功能。但是現在，如果你是初學者，我們只是希望你能對hash有一個基本的概念。很快我們就要講解類（class）了，那個時候所有的東西才會串連起來。同時，閱讀一下文檔中有關hash的這一節。
下載一個包含你開始所需要的所有東西的zip包
包括mootools 1.2的核心庫，上面的示例，一個外部的javascript文件，一個簡單的html頁面和一個css文件。
