Mootools 1.2 Tutorial Introduction to Timers and Hashes_Mootools

A timer can do more than it seems - it can trigger a function periodically. On the other hand, a hash is a collection of key/value pairs. If you're not familiar with hashing yet, don't worry - we'll give you a quick introduction today and provide some links for further reading. Like everything in MooTools, it's incredibly simple to use and incredibly useful once you see it used correctly.
.periodical() function
Basic usage
The only thing you have to do to use this method is to add .periodical(); at the end of a function, so that your function will trigger regularly. As before, there are a few things you need to define. For starters, you need to define a function that you need to use a timer for, and how often you need it to fire (in milliseconds).
Reference code:

Copy code The code is as follows:

var periodicalFunction = function() {
alert('again');
}
window.addEvent('domready', function() {
// The number at the end determines the time interval for this function to be triggered, in milliseconds Units
var periodicalFunctionVar = periodicalFunction.periodical(100);
});

The built-in .bind() method
.periodical() method contains a very nice Feature - It can automatically bind the second parameter. For example, if you want to pass a parameter from outside domready, you only need to pass it in as the second parameter, and you can bind it to a function that you want to trigger periodically.
Reference code:

Copy code The code is as follows:

window.addEvent('domready ', function() {
// Assign a value to a variable
var passedVar = $('elementID');
// Now periodicalFunction can use "this" to refer to "passedVar"
var periodicalFunctionVar = periodicalFunction.periodical(100, passedVar);
});

Stop a regularly triggered function
$clear()
Once you initialize a regularly triggered function function (like we did above), if you want to stop it, you can use the $clear(); method, which is very simple to use:
Reference code: [Copy code] [Save code]
// We pass the timer variable that we used the timer function
$clear(periodicalFunctionVar);

Code example
To connect all this, we will use what we have learned so far There are some things you have learned before (and some things you have not learned yet) to create a timer. First, create a timer HTML page. We also need a start button, a stop button, and a reset button. Additionally, we are going to create a bar that will grow longer over time. Finally, we need a place to display the current elapsed time.
Reference code:

Copy code The code is as follows:

start
pause
reset
< div id="timper_bar_wrap">

0 >The code is as follows:

var timerFunction = function(){
// Every time this function is called
// The variable currentTime will be increased by one
// At the same time, pay attention to "this.counter "
// "this" is hash
// and "counter" is key
var currentTime = this.counter;
// Here we change the content in the div that displays the time
$('timer_display').set('text', currentTime);
// Change the width attribute of the style sheet here to easily create a time progress bar
$('timer_bar').setStyle ('width', currentTime);
}
window.addEvent('domready', function() {
// This is a simple hash object
// There is only one key-value pair ( key/value pair)
var currentCounter = new Hash({counter: 0});
// We initialize our timer and pass in and bind the hash variable
var simpleTimer = timerFunction.periodical( 100, currentCounter);
// Since we don’t want to start the timer when onload
// So we have to stop the timer here
$clear(simpleTimer);
// In Add an event to the start button
//Start the timer again here
$('timer_start').addEvent("click", function(){
simpleTimer = timerFunction.periodical(100, currentCounter );
});
// Clear the timer here
// and make the time bar flash
$('timer_stop').addEvent("click", function(){
$clear(simpleTimer);
$('timer_bar').highlight('#EFE02F');
});
$('timer_reset').addEvent("click", function (){
// The reset button first clears the timer
$clear(simpleTimer);
// Then sets the counter to 0
// More on this later
currentCounter .set('counter', 0);
//
$('timer_display').set('text', currentCounter.counter);
$('timer_bar').setStyle(' width', 0);
});
});

Hash Quick Start
Create a hash
In the above example, there may be Something you've never seen before. First, we used hashing. A hash is a collection of key/value pairs, which is similar to an array containing many objects, but each of these objects has only one attribute. Let’s first take a look at how to create a hash:
Reference code:

Copy code The code is as follows:

var hashVar = new Hash({
'firstKey': 0,
'secondKey': 0
});

You need to change the key Put it on the left, and put the value on the right (except for those who are familiar with hashing, we will only talk about some of the most basic things about hashing, and we will talk about the storage function of hashing in the future). Regardless, there are many benefits to using a system like this. First, you can store multiple collections in one object, and access becomes much easier for organizing complex data.
.set() method and .get() method
You can also use the familiar .set() and .get() methods in hash. When you need to set it, you declare a key and then the value you want to set. When you need to get it, you just need to declare the key you want to get. It's that simple.
Reference code:

Copy code The code is as follows:

// Still use the above hash
// Here we set the value of firstKey to 200
hashVar.set('firstKey', 200);
// Here we get the value of firstKey, which is now 200
var hashValue = hashVar .get('firstKey');

You can get a value by referencing the hash.key name:
Reference code:

Copy code The code is as follows:

var hashValue = hashVar.firstKey;
// The above is the same as the one below
var hashValue = hashVar .get('firstKey');

Add a new key-value pair to the hash
.extend(); method
You can add it through the .extend(); method One or more new key/value pairs are collected into the hash. First, we need to create a new key-value pair object.
Reference code:

Copy code The code is as follows:

// This is a normal Object
// It contains key/value pairs
// But there is no hash function
var genericObject = {
'third': 450,
'fourth' : 89
};

If we want to add this set to our existing hash, we only need to use the .extend(); method to extend the hash:
Reference code:

Copy code The code is as follows:

//Now hashVar contains all key-value pairs in genericObject
hashVar.extend(genericObject) ;

Note: Any repeated keys will be overwritten by subsequent settings. Therefore, if you have the pair "firstKey":"letterA" in the original hash, and then you extend the pair "firstKey":"letterB", then the result of your read in the hash will be "firstKey" :"letterB".
Merge two hashes
.combine(); method
This method allows you to merge two hash objects. If there are duplicate keys, the original values ​​will be retained. The rest is the same as the .extend() method.
Delete a key-value pair from the hash
.erase(); method
We have already seen this method once. It works just as you'd expect. You declare a hash, then add .erase(); at the end, and finally you put the "key" in parentheses.
Reference code:

Copy code The code is as follows:

hashVar.erase('firstKey ');

hash and .each() method
There is another special relationship between hash and .each() method. When you traverse a hash, the traversal function will " "value" is passed as the first argument, and the "key" is passed as the second argument - this is the same as when you use .each on an array, which takes each "item" ) as the first parameter.
Reference code:

Copy code The code is as follows:

hashVar.each(function( value, key) {
// This will pop up a dialog box for each key-value pair in the hash
alert(key ":" value);
});

Learn more

That’s all we have to talk about hashing so far. Since we will be learning more deeply in this series of tutorials, we will find some opportunities to talk about more functions of hashing in the future. But for now, if you are a beginner, we just want you to have a basic idea of ​​hashing. We'll be talking about classes soon, and that's when everything will connect. Also, read the section about hashing in the documentation .

Download a zip package with everything you need to get started

Includes the core library of MooTools 1.2, the example above, an external JavaScript file, a simple HTML page and a CSS file.