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 相关文章推荐
Javascript 跨域访问解决方案
Feb 14 Javascript
让人印象深刻的10个jQuery手风琴效果应用
May 08 Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 Javascript
js冒泡法和数组转换成字符串示例代码
Aug 14 Javascript
js switch case default 的用法示例介绍
Oct 23 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
Apr 25 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
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
PHP的SQL注入过程分析
2012/01/06 PHP
解析PHP中一些可能会被忽略的问题
2013/06/21 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
jquery操作select option 的代码小结
2011/06/21 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
Python实现提取文章摘要的方法
2015/04/21 Python
wxPython使用系统剪切板的方法
2015/06/16 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
python解决字符串倒序输出的问题
2018/06/25 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
python写一个随机点名软件的实例
2019/11/28 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
详解pandas映射与数据转换
2021/01/22 Python
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
介绍一下UNIX启动过程
2013/11/14 面试题
《金子》教学反思
2014/04/13 职场文书
工程售后服务方案
2014/06/08 职场文书
学习十八届四中全会依法治国心得体会
2014/11/03 职场文书
2014年售票员工作总结
2014/11/19 职场文书
靠谱准确的求职信
2019/04/02 职场文书
八年级作文之友情
2019/11/25 职场文书