• Demos and Downloads!
• MooTools Plugins
• About / Contact

Using MooTools Periodicals

If I were to explain MooTools in a sentence I'd say "MooTools makes common JavaScript tasks exponentially easier and the code more elegant." Dealing with intervals in JavaScript is fairly simple but not so elegant. Here's MooTools's take on setInterval.

Basic Function.periodical Usage

/* the function to repeatedly run */
var fnToRepeat = function() {
	console.log('Running periodical!');
};
/* set periodical into action!  once every second */
var periodicalID = fnToRepeat.periodical(1000);

The above function will run periodically every second. This method takes the place of JavaScript's native setInterval -- periodical Moo-izes setInterval. You'll also notice that this method returns the interval ID.

Clearing Periodicals with $clear

/* the function to repeatedly run */
var count = 0;
var fnToRepeat = function() {
	count++;
	console.log('Periodical run ' + count + ' times');
	if(count == 10) {
		$clear(periodicalID);
	}
};
/* do only 10 times, once every second */
var periodicalID = fnToRepeat.periodical(1000);

When you no longer want the periodical to run, you simply use MooTools' global $clear method. That's it -- the periodical stops for good. You may initialize another periodical with the same function however a new interval ID will be returned.

Real-Life Example

I was required to write a slideshow of sorts for a client which would periodically swap slides. The periodical was meant to continue "forever" but stop when the mouse hovered other the displaying slide, then start again when the mouse left. Here's how I did it:

/* setup */
var periodicalID;
var begin = function() {
	periodicalID = (function() {
		//do all the rotation stuff here
	}).periodical(5000);
}
/* start it! */
begin();
/* events ("start" / "stop") */
$('slider-container').addEvents({
	mouseenter: function() {
		//temporarily stop
		$clear(periodicalID);
	},
	mouseleave: begin
});

Note that I didn't "pause" the periodical per say -- I simply stopped the periodical and started a new interval when the mouse left the slide area.

Periodicals are an essential functionality in JavaScript that MooTools has more elegantly presented. MooTools FTW!

Discussion

The Bottom Line