MooTools - Periodicals

MooTools provides an option that supports periodicals. With this, it can call a function periodically with same level time frequency. Let us discuss the methods and features of periodicals.

periodical()

This method is used to raise a function periodically with the same level of time frequency. There are a few things we need to define in the beginning. One is the function which you run periodically and the second one is the numeric value that is for how often you want to raise a function (numeric value measured in milliseconds). Let us take an example that explains how a function executes in every 100 milliseconds. Take a look at the following code.

Example

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var periodicalFunction = function(){
            document. writeln("www.tutorialspoint.com");
         }
         
         window.addEvent('domready', function() {
            //number at the end indicates how often to fire, measure in milliseconds
            var periodicalFunctionVar = periodicalFunction.periodical(100);
         });
      </script>
   </head>
   
   <body>
   </body>
   
</html>

You will receive the following output −

Output

Element as Second Variable

The periodical function also binds a second variable which is outside the domready function(). You can bind the element as second variable into the function which you want to raise periodically. Take a look at the following syntax to understand how to pass a variable.

Syntax

window.addEvent('domready', function() {
   //pass something to a var
   var passedVar = $('elementID');
   
   //now periodicalFunction will be able to use "this" to refer to "passedVar"
   var periodicalFunctionVar = periodicalFunction.periodical(100, passedVar);
});

Here passedVar is the element variable that holds an html element. And that variable passes to the periodical function periodicalFunctionVar as second variable.

$Clear()

$This method is used to stop the periodical function. This method helps reset the periodical variable value. Take a look at the following syntax to understand how to use $clear() function.

Syntax

//we clear the var that we passed the function and periodical to
$clear(periodicalFunctionVar);
Advertisements