Using MooTools Periodicals

By  on  

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!

Recent Features

  • By
    5 More HTML5 APIs You Didn’t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

Incredible Demos

  • By
    Assign Anchor IDs Using MooTools 1.2

    One of my favorite uses of the MooTools JavaScript library is the SmoothScroll plugin. I use it on my website, my employer's website, and on many customer websites. The best part about the plugin is that it's so easy to implement. I recently ran...

  • By
    Image Data URIs with PHP

    If you troll page markup like me, you've no doubt seen the use of data URI's within image src attributes. Instead of providing a traditional address to the image, the image file data is base64-encoded and stuffed within the src attribute. Doing so saves...

Discussion

  1. And let’s not forget periodical’s little brother, fn.delay(t) as an alternative to setTimeout(fn, t)…

  2. @Chris the Developer: Like any good little brother, fn.delay() wants his own post! :)

  3. ah, how the young quibble for a spot in the halls of fame :D

  4. mootools rocks!!

  5. @Adriaan: This is correct.

  6. In one of my websites, I use the new Date().getMinutes() and getHours() to update a counter every 10 seconds (10000ms). The fun is, mootools makes it easy, much more easy than with jQuery or basic Javascript.

    To keep in the spirit of Adriaan, indeed it rocks!

  7. Great stuff as always David

    Short of adding a counter to the function, is there any way to find out how far into a periodical you are before or when you $clear it? This way when you reset the periodical you can set it to the remaining time it had before!?

  8. Great example, thanks! I’m sure this will be helpful quite soon.

  9. This is insane. SUCK ME!

  10. @Jill: No, it’s very simple!

  11. For the same reason (slideshows) I created Loop to handle starting/stopping etc. of a periodical in a class. Check it: http://moodocs.ryanflorence.com/rpflo/Loop

    It has been more valuable than I ever imagined at first.

  12. Ryan Florence
  13. Hi David,
    I have assigned the blinking effect to one element.
    Just doing display block and display none to that element to make it like blink.
    I am assigning the periodical method to that element to make it blink.
    Problem is that when I assign event for first time it works fine, but when I assign it second time then it reduce the interval to half.I mean to say it interval 1000ms then on assigning for second time interval become 500ms. I have tried the clear method but no luck with that.

  14. Mauno Märjamaalt

    I love Mootools and I have used periodical a lot. But I just downloaded the new Mootools v1.3 for my new project and it seemes as if the $clear function does not exist any more (“$clear is not defined” is what my browser says). Anyways, I’m unable to find it, added almost all Core & More classes, but no success :(

    • $clear has been deprecated with MooTools 1.3. Use clearInterval or clearTimeout instead.

      If you want to hold onto clear, you could code:

      $clear = function(inter){ clearInterval(inter); };

    • Eh, this one instead:

      $clear = function(inter){ clearTimeout(inter); clearInterval(inter); return null; };
  15. Makarand

    Thanks a ton.

    It works !

    Just used it in Joomla 1.5 with your code to auto-update an html element with some minor changes. Worked flawlessly.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!