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

在Mootools 1.2中，`.periodical()`方法是一个强大的工具，用于创建定时执行的函数。这个方法允许开发者定义一个函数，使其按照指定的毫秒间隔重复执行。`.periodical()`的使用非常直观，只需在函数调用后附加`.periodical(interval)`，其中`interval`参数表示间隔时间。 例如，以下代码定义了一个名为`periodicalFunction`的函数，它会在DOM准备就绪后每100毫秒执行一次： ```javascript var periodicalFunction = function() { alert('again'); }; window.addEvent('domready', function() { periodicalFunction.periodical(100); }); ``` `.periodical()`方法还支持内置的`.bind()`方法，这意味着可以将额外的参数传递给定期执行的函数。在下面的例子中，`passedVar`变量被绑定到`periodicalFunction`，使得函数内部可以通过`this`关键字访问这个变量： ```javascript var passedVar = $('elementID'); periodicalFunction.periodical(100, passedVar); ``` 如果需要停止由`.periodical()`启动的定时器，可以使用`$clear()`函数。例如： ```javascript var periodicalFunctionVar = periodicalFunction.periodical(100); // 当需要停止定时器时 $clear(periodicalFunctionVar); ``` 在Mootools中，哈希（Hash）是一种键值对集合的数据结构。它允许通过键来存取和管理数据。哈希的创建和使用非常简单，如以下示例所示： ```javascript var currentCounter = new Hash({counter: 0}); ``` 在这个例子中，`currentCounter`是一个哈希，包含一个键`counter`，其初始值为0。 结合`.periodical()`和哈希，可以创建一个计时器应用。例如，创建一个HTML页面，包含开始、暂停和重置按钮，以及一个显示时间的进度条和计时显示： ```html <button id="timer_start">start</button> <button id="timer_stop">pause</button> <button id="timer_reset">reset</button> <div id="timer_bar_wrap"> <div id="timer_bar"></div> </div> <div id="timer_display">0</div> ``` 相应的JavaScript代码可以这样编写： ```javascript var timerFunction = function() { this.counter++; $('timer_display').set('text', this.counter); $('timer_bar').setStyle('width', this.counter); }; var currentCounter = new Hash({counter: 0}); var timerStart = function() { timerFunction.periodical(100, currentCounter); }; var timerStop = function() { $clear(timerFunction); }; var timerReset = function() { currentCounter.counter = 0; $('timer_bar').setStyle('width', '0'); $('timer_display').set('text', 0); }; window.addEvent('domready', function() { $('timer_start').addEvent('click', timerStart); $('timer_stop').addEvent('click', timerStop); $('timer_reset').addEvent('click', timerReset); }); ``` 这个示例中，`timerFunction`每次被调用时都会更新计时器的显示，包括进度条的宽度和计时数值。`timerStart`、`timerStop`和`timerReset`函数分别用于启动、暂停和重置计时器。 Mootools的`.periodical()`方法和哈希是两个强大的工具，它们提供了定时执行任务和管理键值对数据的能力，对于开发动态和交互式的Web应用非常有用。通过理解这些概念和示例，开发者可以更好地利用Mootools框架构建功能丰富的JavaScript应用。