A timer can do more than it looks--timing can trigger a function periodically. Hash, on the other hand, is a collection of key-value pairs (key/value). If you're not familiar with the hash, don't worry now-we'll do a quick and brief introduction today, and we'll provide some links for extended reading. As with everything in MooTools, once you see the correct usage of it, 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 the. Periodical () at the end of a function, so that your function will trigger periodically. 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, and how often you need it to trigger (in milliseconds).
Reference code:
Copy Code code as follows:
var periodicalfunction = function () {
Alert (' Again ');
}
Window.addevent (' Domready ', function () {
The number at the end determines the time interval that this function triggers, in milliseconds
var Periodicalfunctionvar = periodicalfunction.periodical (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 an argument from outside the Domready, you just need to pass it in as a second argument, and you can bind it to the function you want to trigger on a regular basis.
Reference code:
Copy Code code 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 (M, Passedvar);
});
Stop a timer-triggered function
$clear ()
Once you initialize a timer-triggered function (as 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 bring this all together, we've created a timer with something we've learned (and some haven't). First, create a timer for the HTML page, we also need a Start button, a Stop button, and a reset button. In addition, we're going to create a bar block that can grow longer over time. Finally, we need a place to display the time that is currently running.
Reference code:
Copy Code code as follows:
<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>
Now it's time to mootools the code:
Reference code:
Copy Code code as follows:
var timerfunction = function () {
Every time this function is invoked
Variable CurrentTime will add a
Also pay attention to the use of "This.counter"
"This" is a hash
and "Counter" is key.
var currenttime = this.counter++;
Here we change the contents of the div that shows the time
$ (' Timer_display '). Set (' text ', currenttime);
Here you can easily create a time progress bar by changing the width property of the style sheet
$ (' Timer_bar '). SetStyle (' width ', currenttime);
}
Window.addevent (' Domready ', function () {
This is a simple hash object
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 (M, currentcounter);
Because we don't want to start the timer on the onload.
So we're here to stop this timer
$clear (Simpletimer);
Add an event to the Start button
To start this timer again here
$ (' Timer_start '). Addevent ("click", Function () {
Simpletimer = timerfunction.periodical (Currentcounter);
});
Clear the timer here
And it's a time line to shine
$ (' timer_stop '). Addevent ("click", Function () {
$clear (Simpletimer);
$ (' Timer_bar '). Highlight (' #EFE02F ');
});
$ (' Timer_reset '). Addevent ("click", Function () {
Reset button First clears this timer
$clear (Simpletimer);
and set the counter to 0.
We'll talk about that later.
Currentcounter. Set (' counter ', 0);
//
$ (' Timer_display '). Set (' text ', currentcounter.counter);
$ (' Timer_bar '). SetStyle (' width ', 0);
});
});
Hash Quick Start
Create a Hash
In the example above, there may be things that you have never seen before. First, we used the hash. A hash is a collection of key-value pairs (key/value) that resemble an array that contains many objects, although they have only one property. Let's take a look at how to create a hash:
Reference code:
Copy Code code as follows:
var hashvar = new Hash ({
' Firstkey ': 0,
' Secondkey ': 0
});
You need to put the key on the left, and value (value) on the right (in addition to those who are familiar with the hash, we only talk about a hash of the most basic things, we will later on the class to talk about the hash of the storage function). In any case, there are many advantages to using a similar system. First, you can store multiple sets in an object, and access becomes much easier to organize complex data.
. Set () method and. Get () method
You can also use the familiar. Set () and. Get () methods in the hash. When you need to set up, you declare a key, then the value you want to set. When you need to get it, you need to declare the key you want to get. It's as simple as that.
Reference code:
Copy Code code as follows:
Or use the hash above
Here we set the value of Firstkay to 200
Hashvar.set (' Firstkey ', 200);
Here we get the value of Firstkey, now it's 200.
var hashvalue = hashvar.get (' Firstkey ');
You can get a value by referencing the hash. Key Name:
Reference code:
Copy Code code as follows:
var hashvalue = Hashvar.firstkey;
The one above is the same as the bottom.
var hashvalue = hashvar.get (' Firstkey ');
Add a new key value pair to the hash
. Extend (); method
You can use the. Extend () method to add one or more new key value pairs (Key/value pair) to the hash. First, we're going to create a new key-value pair object.
Reference code:
Copy Code code as follows:
It's an ordinary object.
It contains key value pairs (Key/value pairs)
But there's no hash function.
var genericobject = {
' Third ': 450,
' Fourth ': 89
};
If we're going to add this collection to our existing hash, we just need to use the. Extend () method to extend the hash:
Reference code:
Copy Code code as follows:
Now Hashvar contains all the key value pairs in the Genericobject
Hashvar.extend (Genericobject);
NOTE: Any duplicate keys will be overwritten by the following settings. So if you have "Firstkey" in the original hash: "Lettera" and then you extend a pair of "Firstkey": "Letterb", so that the result of your reading in the hash will be "Firstkey": "Letterb".
Merge two hashes
. Combine (); method
This method allows you to merge two hash objects and retain the original values if there are duplicate keys. The rest is the same as the. Extend () method.
Deletes a key value pair from the hash
. Erase (); method
We have seen this method once. It works just the way you expect it to. You declare a hash, then add the. Erase () to the back, and then you put the key in parentheses.
Reference code:
Copy Code code as follows:
Hashvar.erase (' Firstkey ');
Hash and. each () method
The hash and. each () method has a special relationship, when you traverse a hash, the iterated function passes "value" as the first parameter, and the key is passed as the second argument-this is used with the array. Each time, it puts each " Item (item) as the first argument.
Reference code:
Copy Code code 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 say about hash so far. Because we will learn more in this series, we will find some opportunities for more features of hash in the future. But now, if you're a beginner, we just want you to have a basic concept of hash. Soon we're going to talk about class, and that's when all the stuff will be concatenated. Also, read the section on the hash in the document.
Download a Zip package that contains 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.
