A timer can do more than it seems on the surface - timing can trigger a function regularly. On the other hand, hash is a collection of key/value pairs. If you are not familiar with hash, don’t worry now - we will give a quick brief introduction today and provide some related links for further reading. Like everything in MooTools, once you see the correct usage, it's very simple to use and incredibly useful.
.periodical() function
Basic usage
The only thing you have to do with this method is to add .periodical(); at the end of a function, so that your function will fire regularly. As before, there are a few things you need to define. For beginners, you need to define a function that you need to use a timer, and how often you need it to fire (in milliseconds).
Reference code:
var periodicalFunction = function(){
alert('again');
}
('domready', function() {
// The ending number determines the time interval for this function to trigger, in milliseconds
var periodicalFunctionVar = (100);
});
Built-in .bind() method
The .periodical() method contains a very good feature - it can automatically bind the second parameter. For example, if you want to pass a parameter from outside the domready, you just need to pass it in as a second parameter, and you can bind it to the function you want to trigger regularly.
Reference code:
('domready', function() {
// Assign a value to a variable
var passedVar = $('elementID');
// Now periodicalFunction can use "this" to reference "passedVar"
var periodicalFunctionVar = (100, passedVar);
});
Stop a function that triggers timing
$clear()
Once you initialize a timed triggered 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 use the timer function
$clear(periodicalFunctionVar);
Code Example
To connect all of this, we use some of the things we have learned so far (and some of them have not learned) to create a timer. First, to create an HTML page for a timer, we also need a start button, a stop button, and a reset button. In addition, we also need to create a bar block that can slowly grow longer over time. Finally, we need a place to show the current running time.
Reference code:
<button >start</button>
<button >pause</button>
<button >reset</button>
<div >
<div > </div>
</div>
<div >0</div>
Now it's time for MooTools code:
Reference code:
var timerFunction = function(){
// Every time this function is called
// The variable currentTime will be added by
// At the same time, you should pay attention to the use of ""
// "this" is hash
// And "counter" is the key
var currentTime = ++;
// Here we change the contents of 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);
}
('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 hash variables
var simpleTimer = (100, currentCounter);
// Since we don't want to start the timer when onload
// So we're going to stop this timer here
$clear(simpleTimer);
// Add an event on the Start button
// Start this timer again here
$('timer_start').addEvent("click", function(){
simpleTimer = (100, currentCounter);
});
// Clear the timer here
// And the time bar shines
$('timer_stop').addEvent("click", function(){
$clear(simpleTimer);
$('timer_bar').highlight('#EFE02F');
});
$('timer_reset').addEvent("click", function(){
// Reset button first clears this timer
$clear(simpleTimer);
// Then set counter to 0
// This will be discussed in detail later
currentCounter .set('counter', 0);
//
$('timer_display').set('text', );
$('timer_bar').setStyle('width', 0);
});
});
Hash Quick Start
Create a hash
In the example above, there may be something you've never seen before. First, we used hash. Hash is a collection of key/value pairs, which is similar to an array containing many objects, but all of these objects have only one property. Let's first look at how to create a hash:
Reference code:
var hashVar = new Hash({
'firstKey': 0,
'secondKey': 0
});
You need to put the key (key) on the left and the value (value) on the right (except those who are familiar with hash, we will only talk about the most basic things about hash, and we will talk about the hash storage function in the future when we use the class). In any case, there are still many benefits to using a system similar to this. First, you can store multiple collections in one object, and accessing becomes much easier, and organizes complex data.
.set() method and .get() method
You can also use the .set() and .get() methods you are familiar with in hash. When you need to set it, you declare a key, and then the value you want to set. When you need to obtain, your value needs to declare the key (key) you want to obtain. It's that simple.
Reference code:
// Still use the hash above
// Here we set the value of firstKay to 200
('firstKey', 200);
// Here we get the value of firstKey, now it is 200
var hashValue = ('firstKey');
You can get a value by referencing the hash. key name:
Reference code:
var hashValue = ;
// The above is the same as the below
var hashValue = ('firstKey');
Add a new key-value pair to hash
.extend(); method
You can add one or more new key/value pairs (key/value pair) to the hash through the .extend(); method. First, we want to create a new key-value pair object.
Reference code:
// 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 collection to our already existing hash, we just need to use the .extend(); method to extend the hash:
Reference code:
//The hashVar now contains all key-value pairs in genericObject
(genericObject);
Note: Any duplicate keys will be overwritten by the following settings. So if you have a pair like "firstKey":"letterA" in the original hash, and then you extend a pair of "firstKey":"letterB", so your reading result in the hash will be "firstKey":"letterB".
Merge two hashs
.combine(); method
This method allows you to merge two hash objects, and if there are duplicate keys, the original value will be retained. The rest are the same as the .extend() method.
Delete a key-value pair from hash
.erase(); method
We've seen this method once. It works just as you expect it to be. You declare a hash, then add .erase(); afterwards, and finally you put the "key" (key) in brackets.
Reference code:
('firstKey');
hash and .each() methods
There is another special relationship between hash and .each() method. When you traverse a hash, the traversed function will pass the "value" as the first parameter and the "key" as the second parameter - this is the same as when you use .each on an array, which takes each "item" as the first parameter.
Reference code:
(function(value, key) {
// This will pop up a dialog for each key-value pair in the hash
alert(key + ":" + value);
});
.periodical() function
Basic usage
The only thing you have to do with this method is to add .periodical(); at the end of a function, so that your function will fire regularly. As before, there are a few things you need to define. For beginners, you need to define a function that you need to use a timer, and how often you need it to fire (in milliseconds).
Reference code:
Copy the codeThe code is as follows:
var periodicalFunction = function(){
alert('again');
}
('domready', function() {
// The ending number determines the time interval for this function to trigger, in milliseconds
var periodicalFunctionVar = (100);
});
Built-in .bind() method
The .periodical() method contains a very good feature - it can automatically bind the second parameter. For example, if you want to pass a parameter from outside the domready, you just need to pass it in as a second parameter, and you can bind it to the function you want to trigger regularly.
Reference code:
Copy the codeThe code is as follows:
('domready', function() {
// Assign a value to a variable
var passedVar = $('elementID');
// Now periodicalFunction can use "this" to reference "passedVar"
var periodicalFunctionVar = (100, passedVar);
});
Stop a function that triggers timing
$clear()
Once you initialize a timed triggered 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 use the timer function
$clear(periodicalFunctionVar);
Code Example
To connect all of this, we use some of the things we have learned so far (and some of them have not learned) to create a timer. First, to create an HTML page for a timer, we also need a start button, a stop button, and a reset button. In addition, we also need to create a bar block that can slowly grow longer over time. Finally, we need a place to show the current running time.
Reference code:
Copy the codeThe code is as follows:
<button >start</button>
<button >pause</button>
<button >reset</button>
<div >
<div > </div>
</div>
<div >0</div>
Now it's time for MooTools code:
Reference code:
Copy the codeThe code is as follows:
var timerFunction = function(){
// Every time this function is called
// The variable currentTime will be added by
// At the same time, you should pay attention to the use of ""
// "this" is hash
// And "counter" is the key
var currentTime = ++;
// Here we change the contents of 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);
}
('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 hash variables
var simpleTimer = (100, currentCounter);
// Since we don't want to start the timer when onload
// So we're going to stop this timer here
$clear(simpleTimer);
// Add an event on the Start button
// Start this timer again here
$('timer_start').addEvent("click", function(){
simpleTimer = (100, currentCounter);
});
// Clear the timer here
// And the time bar shines
$('timer_stop').addEvent("click", function(){
$clear(simpleTimer);
$('timer_bar').highlight('#EFE02F');
});
$('timer_reset').addEvent("click", function(){
// Reset button first clears this timer
$clear(simpleTimer);
// Then set counter to 0
// This will be discussed in detail later
currentCounter .set('counter', 0);
//
$('timer_display').set('text', );
$('timer_bar').setStyle('width', 0);
});
});
Hash Quick Start
Create a hash
In the example above, there may be something you've never seen before. First, we used hash. Hash is a collection of key/value pairs, which is similar to an array containing many objects, but all of these objects have only one property. Let's first look at how to create a hash:
Reference code:
Copy the codeThe code is as follows:
var hashVar = new Hash({
'firstKey': 0,
'secondKey': 0
});
You need to put the key (key) on the left and the value (value) on the right (except those who are familiar with hash, we will only talk about the most basic things about hash, and we will talk about the hash storage function in the future when we use the class). In any case, there are still many benefits to using a system similar to this. First, you can store multiple collections in one object, and accessing becomes much easier, and organizes complex data.
.set() method and .get() method
You can also use the .set() and .get() methods you are familiar with in hash. When you need to set it, you declare a key, and then the value you want to set. When you need to obtain, your value needs to declare the key (key) you want to obtain. It's that simple.
Reference code:
Copy the codeThe code is as follows:
// Still use the hash above
// Here we set the value of firstKay to 200
('firstKey', 200);
// Here we get the value of firstKey, now it is 200
var hashValue = ('firstKey');
You can get a value by referencing the hash. key name:
Reference code:
Copy the codeThe code is as follows:
var hashValue = ;
// The above is the same as the below
var hashValue = ('firstKey');
Add a new key-value pair to hash
.extend(); method
You can add one or more new key/value pairs (key/value pair) to the hash through the .extend(); method. First, we want to create a new key-value pair object.
Reference code:
Copy the codeThe 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 collection to our already existing hash, we just need to use the .extend(); method to extend the hash:
Reference code:
Copy the codeThe code is as follows:
//The hashVar now contains all key-value pairs in genericObject
(genericObject);
Note: Any duplicate keys will be overwritten by the following settings. So if you have a pair like "firstKey":"letterA" in the original hash, and then you extend a pair of "firstKey":"letterB", so your reading result in the hash will be "firstKey":"letterB".
Merge two hashs
.combine(); method
This method allows you to merge two hash objects, and if there are duplicate keys, the original value will be retained. The rest are the same as the .extend() method.
Delete a key-value pair from hash
.erase(); method
We've seen this method once. It works just as you expect it to be. You declare a hash, then add .erase(); afterwards, and finally you put the "key" (key) in brackets.
Reference code:
Copy the codeThe code is as follows:
('firstKey');
hash and .each() methods
There is another special relationship between hash and .each() method. When you traverse a hash, the traversed function will pass the "value" as the first parameter and the "key" as the second parameter - this is the same as when you use .each on an array, which takes each "item" as the first parameter.
Reference code:
Copy the codeThe code is as follows:
(function(value, key) {
// This will pop up a dialog for each key-value pair in the hash
alert(key + ":" + value);
});
More learning
That's all we're going to talk about hash so far. Since we will learn more in-depth in this series of tutorials, we will find some opportunities to talk about more functions of hash in the future. But now, if you are a beginner, we just hope you have a basic concept of hash. We will soon explain the class, and then everything will be connected. Also, read the documentThis section about hash。
Download a zip package with everything you need to start
Includes the core library of MooTools 1.2, the example above, an external JavaScript file, a simple HTML page, and a CSS file.