Mootools 1.2教程 定时器和哈希简介


Posted in Javascript onSeptember 15, 2009

定时器能比它表面看起来做更多的事情——定时能定期地触发一个函数。另一方面,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文件。

Javascript 相关文章推荐
JObj预览一个JS的框架
Mar 13 Javascript
ExtJS实现文件下载的方法实例
Nov 09 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
jquery实现简单实用的打分程序实例
Jul 23 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
vue中实现点击变成全屏的多种方法
Sep 27 Javascript
Mootools 1.2教程 正则表达式
Sep 15 #Javascript
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 #Javascript
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 #Javascript
Mootools 1.2教程 Fx.Tween的使用
Sep 15 #Javascript
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 #Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 #Javascript
Mootools 1.2教程 设置和获取样式表属性
Sep 15 #Javascript
You might like
php 静态变量与自定义常量的使用方法
2010/01/26 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
js汉字转拼音实现代码
2013/02/06 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
jQuery图片轮播实现并封装(一)
2016/12/03 Javascript
node.js实现回调的方法示例
2017/03/01 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
node.js遍历目录的方法示例
2018/08/01 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
Python3.6简单操作Mysql数据库
2017/09/12 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
python如何实现不用装饰器实现登陆器小程序
2019/12/14 Python
python中get和post有什么区别
2020/06/19 Python
Omio意大利:全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
南京某软件公司的.net面试题
2015/11/30 面试题
会计电算化专业毕业生自荐信
2013/12/20 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
期中考试后的感想
2015/08/07 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
Python OpenCV 图像平移的实现示例
2021/06/04 Python
Golang数据类型和相互转换
2022/04/12 Golang