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!
And let’s not forget periodical’s little brother, fn.delay(t) as an alternative to setTimeout(fn, t)…
@Chris the Developer: Like any good little brother, fn.delay() wants his own post! :)
ah, how the young quibble for a spot in the halls of fame :D
mootools rocks!!
@Adriaan: This is correct.
In one of my websites, I use the
new Date().getMinutes()andgetHours()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!
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!?
Great example, thanks! I’m sure this will be helpful quite soon.
This is insane. SUCK ME!
@Jill: No, it’s very simple!
For the same reason (slideshows) I created
Loopto handle starting/stopping etc. of a periodical in a class. Check it: http://moodocs.ryanflorence.com/rpflo/LoopIt has been more valuable than I ever imagined at first.
Woops, wrong link:
http://moodocs.net/rpflo/mootools-rpflo/Loop
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.
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; };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.