DIV CSS 佈局教程網

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

.periodical()函數

基本用法

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

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

內置的.bind()方法

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

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

停止一個定時觸發的函數

$clear()

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

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

代碼示例

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

1. <button id="timer_start">start</button>
2. <button id="timer_stop">pause</button>
3. <button id="timer_reset">reset</button>
4.  
5. <div id="timper_bar_wrap">
6.     <div id="timer_bar"> </div>
7. </div>
8.  
9.  
10. <div id="timer_display">0</div>

現在該是MooTools的代碼了：

1. var timerFunction = funct