Sticky Posts
May 20, 2009
My First jQuery Extension | JavaScript setInterval/clearInterval
I'm a Sunday Javascript-coder. Using my C++ skills and the 'basicest' of JS knowledge I sometimes manage to pull out what I need out of JS. This is my replacement for the setInterval/clearInterval Javascript function pack. I needed something to work in jQuery style ... even if it can be used without. I wanted an object where to stop / start the interval easily and I managed to do it.
It's [probably] not optimal and probably a JS guru would humiliate me with this code but this is it, take it or leave it and enjoy it. Wondering what can be achieved with it? Look on your right at the fading ads. That's what I needed it for. I'll create some nice news tickers too using this.
The jQuery Interval Plugin
Prepare for a lot of parameter validation. It's an issue I have after so much coding in C++. Probably code could have been shorter ... probably. If you improve this share it with me.
<?php
/*** --------------------------------------------------------------- ***/
jQuery.interval = function(callback, delay, initialize){
// Copyright 5ubliminal 2009 - 2012 :)
// Free for personal use
// Thou shalt not change this, sell or claim
var intervalObject = {
ID: 0, // The interval ID
delay: 0, // The interval Delay
callback: 0, // The interval callback
onStart: 0, // Callback to call on start
onStop: 0, // Callback to call on stop
// Assign / Update callback / delay
assign: function(callback, delay, initialize){
delay = parseInt(delay); // Make sure it's int
// Validate parameters
if((typeof(callback) != 'function') || (delay < 1)) return false;
// Store for future re-use on stop / start
this.delay = delay;
this.callback = callback;
// Call the one time only initialize function
if(initialize && (typeof(initialize) == 'function')) initialize(this);
return true;
},
// Assign / Update stop callback
setStop: function(callback){
this.onStop = 0;
if(!callback || (typeof(callback) != 'function')) return this;
this.onStop = callback;
return this;
},
// Assign / Update stop callback
setStart: function(callback){
this.onStart = 0;
if(!callback || (typeof(callback) != 'function')) return this;
this.onStart = callback;
return this;
},
// Start / Restart the interval
// BeforeStart may be a function called [initialization] before interval starts
start: function(beforeStart){
this.stop();
if((typeof(this.callback) != 'function') || (this.delay < 1)) return false;
// Validate callback and assign it
if(beforeStart && (typeof(beforeStart) == 'function')) this.setStart(beforeStart);
// Now try to call it
if(this.onStart && (typeof(this.onStart) == 'function')) this.onStart(this);
// Assign / Create new interval ID
this.ID = setInterval(this.callback, this.delay);
return this;
},
// Stop / Pause the interval
// AfterEnd may be a function called when the interval is stopped
stop: function(afterEnd){
if(!this.ID) return this;
// Validate callback and assign it
if(afterEnd && (typeof(afterEnd) == 'function')) this.setStop(afterEnd);
// Now try to call it
if(this.onStop && (typeof(this.onStop) == 'function')) this.onStop(this);
// Clear the interval ... this stops it :)
clearInterval(this.ID);
this.ID = 0;
return this;
}
};
delay = parseInt(delay);
// Validate parameters
if((typeof(callback) != 'function') || (delay < 1))
return intervalObject; // Manual initialization
// Assign callback and delay
intervalObject.assign(callback, delay, initialize);
// Start the interval
intervalObject.start();
return intervalObject;
};
/*** --------------------------------------------------------------- ***/
?>
You are to use it like this:
var tickerInterval = jQuery.interval(function(){ /* interval callback */); } , 2500, function(interval){ /* initialize */ });
or
var tickerInterval = jQuery.interval();
tickerInterval.assign(function(){ /* interval callback */); } , 2500, function(interval){ /* initialize */ });
tickerInterval.stop(function(interval){ /* onStop() */ }); tickerInterval.start(function(interval){ /* onStart() */ });
A real live example is present on this very site. Look at the fading ads again. Enjoy!

