MooTools教程(14):定时器和Hash对象

摩羯sensen1990

摩羯sensen1990

2016-02-20 00:41

岁数大了,QQ也不闪了,微信也不响了,电话也不来了,但是图老师依旧坚持为大家推荐最精彩的内容,下面为大家精心准备的MooTools教程(14):定时器和Hash对象,希望大家看完后能赶快学习起来。

在今天的教程中,我们将关注两块内容:第一个就是.periodical();方法,然后我们再对hash做一个简介。定时器能比它表面看起来做更多的事情定时能定期地触发一个函数。另一方面,hash则是键值对(key/value)的集合。如果你对hash还不熟悉现在也不要着急我们今天就会做一个快速简要的介绍,并且会提供一些延伸阅读的相关链接。就像MooTools中的所有东西一样,一旦你看到它的正确用法,它使用起来就非常的简单,并且不可思议的有用。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/).periodical()函数基本用法

使用这个方法你唯一要做的就是在一个函数的结尾添加.periodical();,那样你的函数就会定时地触发。和以前的一样,有几个东西你是需要定义的。对于初学者,你需要定义一个你需要使用定时器的函数,还有你需要它多久触发一次(以毫秒为单位)。

参考代码:   periodicalFunction = (){    alert();} window.addEvent(, () {         periodicalFunctionVar = periodicalFunction.periodical();});内置的.bind()方法

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

参考代码:  window.addEvent(, () {         passedVar = $();         periodicalFunctionVar = periodicalFunction.periodical(, passedVar);});停止一个定时触发的函数

$clear()

一旦你初始化了一个定时触发的函数(就像我们上面所做的那样),如果你想停止它,你可以使用$clear();方法,它使用起来非常简单:

参考代码:  $clear(periodicalFunctionVar);代码示例

为把这所有的连贯起来,我们就用我们目前学过的一些东西(也有一些是没有学过的)来创建一个定时器。首先,建立一个定时器的HTML页面,我们还需要一个开始按钮,一个停止按钮,还有一个重置按钮。另外,我们还要创建一个条形块,它可以随着时间慢慢变长。最后,我们还需要一个地方来显示当前已经运行的时间。

参考代码:  button id=start/buttonbutton id=pause/buttonbutton id=reset/button div id=    div id= /div/div  div id=/div

现在该是MooTools的代码了:

参考代码:   timerFunction = (){                         currentTime = .counter++;        $().set(, currentTime);        $().setStyle(, currentTime);} window.addEvent(, () {             currentCounter =  Hash({counter: });         simpleTimer = timerFunction.periodical(, currentCounter);              $clear(simpleTimer);             $().addEvent(, (){        simpleTimer = timerFunction.periodical(, currentCounter);    });             $().addEvent(, (){        $clear(simpleTimer);        $().highlight();    });     $().addEvent(, (){                $clear(simpleTimer);                        currentCounter .set(, );                $().set(, currentCounter.counter);        $().setStyle(, );    });});

 0

 

Hash快速入门创建一个hash

在上面的例子中,可能有一些东西是你从来没有见过的。首先,我们使用了hash。hash是一个由键值对(key/value)组成的集合,它和一个包含许多对象的数组类似,不过这些对象都只有一个属性。我们先来看一下如何建立一个hash:

参考代码:   hashVar =  Hash({     : ,     : });

你需要把键(key)放在左边,而值(value)放在右边(除了那些对hash很熟悉的人外,我们只讲一些关于hash最基本的东西,我们会在以后将类时再来讲hash的存储功能)。不管怎样,使用和这类似的系统还是又很多好处的。首先,你可以在一个对象中存储多个集合,存取变得容易得多,对于组织复杂的数据组织起来。

.set()方法和.get()方法

你也可以在hash中使用你熟悉的.set()和.get()方法。当你需要设置的时候,你声明一个键(key),然后是你要设置的值。当你需要获取的时候,你值需要声明你要获取的键(key)就行了。就这么简单。

参考代码:  hashVar.set(, );  hashValue = hashVar.get();

你可以可以通过引用hash.键名来获取一个值:

参考代码:   hashValue = hashVar.firstKey; hashValue = hashVar.get();添加一个新的键值对到hash中

.extend();方法

你可以通过.extend();方法来添加一个或者多个新的键值对(key/value pair)集合到hash中。首先,我们要创建一个新的键值对对象。

参考代码:    genericObject = {    : ,    : };

如果我们要把这个集合加入到我们已经存在的hash中,我们只需要使用.extend();方法来扩展hash就行了:

参考代码:  hashVar.extend(genericObject);

注意:任何重复的键都将会被后面的设置覆盖掉。因此,如果你在原始的hash中有"firstKey":"letterA"这样一对,然后你又扩展了一对"firstKey":"letterB",这样你在hash中的读取结果将是"firstKey":"letterB"。

合并两个hash

.combine();方法

这个方法可以让你合并两个hash对象,如果有重复的键将保留原始的值。其余的则和.extend()方法一样。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)从hash中删除一个键值对

.erase();方法

我们已经见过这个方法一次了。它的工作就和你期望的那样。你声明一个hash,然后在后面副加上.erase();,最后你再把键(key)放在括号里面。

参考代码:  hashVar.erase();hash和.each()方法

hash和.each()方法又一种特别的关系,当你遍历一个hash的时候,遍历的函数将把值(value)作为第一个参数传递,而把键(key)作为第二个参数传递这和你在数组上使用.each的时候一样,它把每个项(item)作为第一个参数。

参考代码:  hashVar.each((value, key) {        alert(key +  + value);});更多学习

我们目前为止要讲的关于hash的内容就这么多了。由于这个系列教程中我们会更深入的学习,在以后我们将找一些机会来讲有关hash的更多功能。但是现在,如果你是初学者,我们只是希望你能对hash有一个基本的概念。很快我们就要讲解类(class)了,那个时候所有的东西才会串连起来。同时,阅读一下文档中。

包括MooTools 1.2的核心库,上面的示例,一个外部的JavaScript文件,一个简单的HTML页面和一个CSS文件。

展开更多 50%)
分享

猜你喜欢

MooTools教程(14):定时器和Hash对象

Web开发
MooTools教程(14):定时器和Hash对象

网页之定时器详解

ASP
网页之定时器详解

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

VC中实现毫秒定时器

编程语言 网络编程
VC中实现毫秒定时器

如何关闭win7唤醒定时器

电脑网络
如何关闭win7唤醒定时器

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Prototype实战教程----14.Hash

Web开发
Prototype实战教程----14.Hash

MooTools教程(4):函数和MooTools

Web开发
MooTools教程(4):函数和MooTools

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

还win8清晰桌面图标的完美方案

还win8清晰桌面图标的完美方案

javascript恶意代码修改主页修复

javascript恶意代码修改主页修复
下拉加载更多内容 ↓