Javascript Global Timer with Multiple Callbacks

Question

I want to create a global timer object in javascript, and then I will be able to add callbacks to it on the fly. Thus, I can simply use one global timer in my script to perform all actions at a certain interval, and not to waste resources using multiples.

Here's how I want to be able to put things together:

var timer = new function() { clearInterval( this.interval ); //[1] At this point I want the Callbacks to be run var self = this; setTimeout(function() {self.timer()}, 200); } function otherObject = new function() { //When created I want to bind my object function called cb to the global timer at [1] } otherObject.prototype.cb = function() { //Stuff that should be done every time the timer is run } var someObject = new otherObject(); 

How can I make it possible to bind any numerical functions (most of which are functions inside other objects) to start with the interval of my timer on the fly?

Answer 1

Create a GlobalTimer object and let it register callback functions and cancel itself.

 function makeGlobalTimer(freq) { freq = freq || 1000; // array of callback functions var callbacks = []; // register the global timer var id = setInterval( function() { var idx; for (idx in callbacks) { callbacks[idx](); } }, freq); // return a Global Timer object return { "id": function() { return id; }, "registerCallback": function(cb) { callbacks.push(cb); }, "cancel": function() { if (id !== null) { clearInterval(id); id = null; } } }; } var gt = makeGlobalTimer(500); gt.registerCallback(function() { console.log("a"); }); gt.registerCallback(function() { console.log("b"); }); setTimeout(function() { gt.cancel(); }, 5000); 

Answer 2

At the interval fire event. Signing functions can listen to the event (or not) and choose whether or not to fire according to their own logic.

This jQuery method will be as follows:

 (function() { setInterval(function() { $(document).trigger('heartbeat-of-the-universe'); }, 200); })(); 

Then later inside otherObject ...

 $(document).bind('heartbeat-of-the-universe', this.cb); 

There are obviously other ways to implement events.

As the google link in the comment notes, this is not an option with the highest performance. However, it is flexible and relatively forgiving.

Answer 3

Just a slightly modified version of the aekeus approach. Now with pauses and renewable timers, the third arguments and faster callbacks -loop:

 function Interval(callback, freq) { // array of callback functions var args = arguments, callbacks = [callback], paused = false; // register the global timer var id = setInterval(function () { if(paused) return; var len = callbacks.length, i = len; while(i--) callbacks[len - 1 - i].apply(Interval, Array.prototype.slice.call(args, 2, args.length)); }, freq); // return a Global Timer object return { id: function () { return id; }, add: function (cb) { callbacks.push(cb); }, clear: function () { if (id === null) return; clearInterval(id); id = null; }, pause: function(){ paused = true; }, resume: function(){ paused = false; } }; } 

You can pass extra arguments as the default setInterval (even in IE lt 9):

 function callback(date) { console.log(date); } var interval = Interval(callback, 1000, new Date); 

Usage example:

 var interval = Interval(function () { console.log("init", new Date); }, 1000); interval.add(function () { console.log("a", new Date); }); interval.add(function () { console.log("b", new Date); }); document.onmousedown = interval.pause; document.onmouseup = interval.resume;