Mootools1.2 introduction to timer and hash _ Mootools

In today's tutorial, we will focus on two parts: the first one is. periodical (); method, and then we will make an introduction to hash. A timer can do more things than it looks like-it can trigger a function regularly. On the other hand, hash is a set of key-value pairs. If you are not familiar with hash, don't worry about it now-we will give a quick introduction today and provide some links for further reading. Just like everything in MooTools, once you see its correct usage, it is very simple to use and incredibly useful.
. Periodical () function
Basic usage
The only thing you need to do with this method is to add. periodical (); at the end of a function, so that your function will be triggered regularly. As before, there are several things you need to define. For beginners, You need to define a function that requires a timer, and how often it is triggered (in milliseconds ).
Reference code:

The Code is as follows:

Var periodicalFunction = function (){
Alert ('again ');
}
Window. addEvent ('domainready', function (){
// The ending number determines the time interval triggered by this function, 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 a parameter out of domready, you only need to pass it as the second parameter, you can bind it to the function you want to trigger on a regular basis.
Reference code:

The Code is as follows:

Window. addEvent ('domainready', function (){
// Assign a value to a variable
Var passedVar = $ ('elementid ');
// Now periodicalFunction can use "this" to reference "passedVar"
Var periodicalFunctionVar = periodicalFunction. periodical (100, passedVar );
});

Stop a function triggered at a time
$ Clear ()
Once you initialize a regularly triggered function (as we have done above), if you want to stop it, you can use the $ clear (); method, it is very simple to use:
Reference code: [] [Save Code]
// We pass the timer variable that we used the timer function.
$ Clear (periodicalFunctionVar );

Sample Code
In order to make all of this coherent, we will use some of the things we have learned (and some are not) to create a timer. First, create an HTML page for the timer. We also need a start button, a stop button, and a reset button. In addition, we also need to create a bar block, which can grow over time. Finally, we need a place to display the current running time.
Reference code:

The Code is as follows:

Start
Pause
Reset

0

Now it is the code of MooTools:
Reference code:

The Code is as follows:

Var timerFunction = function (){
// Every time this function is called
// The variable currentTime adds one
// Pay attention to the usage of "this. counter"
// "This" is hash
// While counter is the key
Var currentTime = this. counter ++;
// Here we change the content in p that shows the time
$ ('Timer _ display'). set ('text', currentTime );
// Change the width attribute of the style sheet to easily create a time progress bar.
$ ('Timer _ bar'). setStyle ('width', currentTime );
}
Window. addEvent ('domainready', 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 (100, currentCounter );
// Because we don't want to start the timer during onload
// So we need to stop this timer here
$ Clear (simpleTimer );
// Add an event on the Start button
// Start the timer again here
$ ('Timer _ start'). addEvent ("click", function (){
SimpleTimer = timerFunction. periodical (100, currentCounter );
});
// Clear the timer here
// The time is shining.
$ ('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 );
// Set counter to 0
// I will discuss it in detail 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 have never seen before. First, we use hash. Hash is a set of key-value pairs. It is similar to an array containing many objects, but these objects only have one attribute. Let's first look at how to create a hash:
Reference code:

The Code is as follows:

Var hashVar = new Hash ({
'Firstkey': 0,
'Secondkey': 0
});

You need to put the key on the left, and the value on the right (except for those familiar with hash, we only talk about the most basic things about hash, we will introduce the hash storage function later ). In any case, there are many benefits to using similar systems. First, you can store multiple sets in an object, which makes it much easier to access and organize complex data in an organization.
. 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 the key, you need to declare the key you want to obtain. That's simple.
Reference code:

The Code is as follows:

// Use the above hash
// Here we set firstKay to 200
HashVar. set ('firstkey', 200 );
// Here we get the firstKey value, which is 200
Var hashValue = hashVar. get ('firstkey ');

You can obtain a value by referencing the hash. Key Name:
Reference code:

The Code is as follows:

Var hashValue = hashVar. firstKey;
// The above is the same as the following
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 need to create a new key-Value Pair object.
Reference code:

The Code is as follows:

// This is a common object
// It contains key-value pairs (key/value pairs)
// But does not have the hash function
Var genericObject = {
'Third': 450,
'Fourth': 89
};

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

The Code is as follows:

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

Note: Any duplicate keys will be overwritten by subsequent settings. Therefore, if you have a pair like "firstKey": "letask" in the original hash, then you have extended a pair of" firstKey ":" letterB ", in this way, the read result in the hash will be "firstKey": "letterB ".
Merge two hashes
. Combine (); Method
This method allows you to merge two hash objects. If duplicate keys exist, the original values are retained. The rest are 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 as you expected. You declare a hash, Add. erase (); to the end, and put the "key" in brackets.
Reference code:

The Code is as follows:

HashVar. erase ('firstkey ');

Hash and. each () Methods
Hash and. the each () method has another special relationship. When you traverse a hash, The traversal function will pass "value" as the first parameter, the "key" (key) is passed as the second parameter-this is used with the array. each item is used as the first parameter.
Reference 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

So far, we have to talk about so much hash content. As we will learn more deeply 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 that you can have a basic concept of hash. Soon we will explain the class, and at that time all things will be connected. At the same time, read the hash section in this document.

Download a zip package containing everything you need

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