您现在的位置是：首页 > 其他

当前栏目

Mootools1.2教程定时器和哈希简介

教程哈希简介定时器 Mootools1.2

2023-06-13 09:14:12 时间

定时器能比它表面看起来做更多的事情——定时能定期地触发一个函数。另一方面，hash则是键值对（key/value）的集合。如果你对hash还不熟悉现在也不要着急——我们今天就会做一个快速简要的介绍，并且会提供一些延伸阅读的相关链接。就像MooTools中的所有东西一样，一旦你看到它的正确用法，它使用起来就非常的简单，并且不可思议的有用。
.periodical()函数
基本用法
使用这个方法你唯一要做的就是在一个函数的结尾添加.periodical();，那样你的函数就会定时地触发。和以前的一样，有几个东西你是需要定义的。对于初学者，你需要定义一个你需要使用定时器的函数，还有你需要它多久触发一次（以毫秒为单位）。
参考代码：
复制代码代码如下:

varperiodicalFunction=function(){
alert("again");
}
window.addEvent("domready",function(){
//结尾的数字决定了这个函数触发的时间间隔，以毫秒为单位
varperiodicalFunctionVar=periodicalFunction.periodical(100);
});

内置的.bind()方法
.periodical()方法包含了一个非常好的特性——它可以自动地绑定第二个参数。举个例子，如果你想从domready的外面传递一个参数，你只需要把它作为第二个参数传进去，你就可以把它绑定到你要定期触发的函数上了。
参考代码：
复制代码代码如下:

window.addEvent("domready",function(){
//给一个变量赋值
varpassedVar=$("elementID");
//现在periodicalFunction就可以使用"this"来引用"passedVar"
varperiodicalFunctionVar=periodicalFunction.periodical(100,passedVar);
});

停止一个定时触发的函数
$clear()
一旦你初始化了一个定时触发的函数（就像我们上面所做的那样），如果你想停止它，你可以使用$clear();方法，它使用起来非常简单：
参考代码：[复制代码][保存代码]
//我们传递那个我们使用了定时器函数的定时器变量
$clear(periodicalFunctionVar);

代码示例
为把这所有的连贯起来，我们就用我们目前学过的一些东西（也有一些是没有学过的）来创建一个定时器。首先，建立一个定时器的HTML页面，我们还需要一个开始按钮，一个停止按钮，还有一个重置按钮。另外，我们还要创建一个条形块，它可以随着时间慢慢变长。最后，我们还需要一个地方来显示当前已经运行的时间。
参考代码：
复制代码代码如下:
<buttonid="timer_start">start</button>
<buttonid="timer_stop">pause</button>
<buttonid="timer_reset">reset</button>
<divid="timper_bar_wrap">
<divid="timer_bar"></div>
</div>
<divid="timer_display">0</div>

现在该是MooTools的代码了：
参考代码：
复制代码代码如下:
vartimerFunction=function(){
//每次当这个函数被调用时
//变量currentTime就会增加一
//同时要注意一下"this.counter"的使用
//"this"是hash
//而"counter"是key
varcurrentTime=this.counter++;
//这里我们改变显示时间的div里面的内容
$("timer_display").set("text",currentTime);
//这里改变样式表的width属性，可以轻松地创建一个时间进度条
$("timer_bar").setStyle("width",currentTime);
}
window.addEvent("domready",function(){
//这是一个简单的hash对象
//只有一个键值对（key/valuepair）
varcurrentCounter=newHash({counter:0});
//我们初始化我们的定时器并传入和绑定hash变量
varsimpleTimer=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：
参考代码：
复制代码代码如下:
varhashVar=newHash({
"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
varhashValue=hashVar.get("firstKey");

你可以可以通过引用hash.键名来获取一个值：
参考代码：
复制代码代码如下:
varhashValue=hashVar.firstKey;
//上面的和下面的一样
varhashValue=hashVar.get("firstKey");

添加一个新的键值对到hash中
.extend();方法
你可以通过.extend();方法来添加一个或者多个新的键值对（key/valuepair）集合到hash中。首先，我们要创建一个新的键值对对象。
参考代码：
复制代码代码如下:
//这是一个普通的对象
//它包含键值对（key/valuepairs）
//但是没有hash的功能
vargenericObject={
"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);
});

zl程序教程

当前栏目

Mootools1.2教程定时器和哈希简介

更多学习

相关文章