New here? Read Greetings Earthling!

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!

Category: JavaScript JS
Tagged:

Comments are closed.