Mootools 1.2教程(14)——定时器和哈希简介

原文地址：30 Days of Mootools 1.2 Tutorials - Day 14 - Periodical and Intro to Hashes

MooTools 1.2中的定时器和Hash对象

阅读上一讲：Mootools 1.2教程(13)——正则表达式

在今天的教程中，我们将关注两块内容：第一个就是.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); 
    }); 
});