Javascript timer – advanced features, simple to use

javascript is the core of rich UI development and ajax driven website. i enjoy doing these. but in many cases, i thought things would be easier if the setTimeout(…) or setInterval(…) functions were simpler to handle. if you ever tried to make something like fadeout effect or accordion or anything that happens with a certain interval, you may understand what i mean. so, i thought it would be great to use a timer if anyone made already. i searched, got hundreds. but, none of them seemed perfect for me to use everywhere. for example, if you are familiar with visual basic (former) or .NET timer object, its very easy to use anywhere, anyhow. actually, this was the basic idea for my development (though it supports more than the basic).

so, i wrote a javascript timer object trying to provide a complete object oriented solution (basically for me, but you can use it too . its very simple to use, yet very powerful. you can set your desired interval and a callback function which will be called after each interval.

the simplest use would be:

var timer = new Timer(1000, myfunction);
timer.start();

first parameter sets the interval in milliseconds and second is the callback function to call. so, this will call myfunction() every second.

methods of Timer object and their parameters and return values (API reference) can be found here.

but, dont you want something more? well, in that case, first of all you should know that Timer object supports concatenation for almost every function. so you can rewrite the above code as:

var timer = new Timer(1000, myfunction).start();

whenever you want to stop the timer, just call:

timer.stop();

isn’t that simple? well, that’s just the beginning.

its time you are introduced to some necessary functions:

//pauses the timer
timer.pause();

//resumes the timer, if it was paused
timer.resume();

you should keep in mind that, there is a difference between stop() and pause(). when you pause the timer, it remembers how much of its interval is left. after resuming, it runs the remaining time of its interval. for example, if you set interval to 2000 milliseconds and pause the timer after running 1500 milliseconds; when you resume, it will call the callback function (i.e., myfunction ) after 500 milliseconds. this feature could be useful for rotating ads of news flashers in a website.

also, you have various functions like interval, addCallback, and many more. so, our very first code can be rewritten as:

var timer = new Timer().interval(1000).addCallback(myfunction).start();

or, to please eyes:

var timer = new Timer();
timer.interval(1000)
.addCallback(myfunction)
.start();

note that, Timer class also supports empty constructor like Timer() which is my personal favorite.

wait.. where is the multiple callback feature? well here it is:

var timer = new Timer();
timer.interval(1000)
.addCallback(myfunction1)
.addCallback(myfunction2)
//......
.addCallback(myfunctionN)
.start();

okay? well, you should know that functions are executed in parallel. if you dont trust me, try this:

var timer = new Timer();
timer.interval(1000)
.addCallback( function() { alert('hi there.'); } )
.addCallback(myfunction)
.start();

see, alert doesn’t block executing myfunction. i tried adding 20 callback functions. some of them showed time in a div, and some did something else. all of them executed in parallel. i.e., none block others’ execution.

well, so far everything runs forever unless you call timer.stop() or timer.pause(). what if you want the basic setTimeout(…) function back? there’s a way:

var timer = new Timer();
timer.interval(1000)
.addCallback(myfunction1)
.addCallback(myfunction2)
.runOnce(true)
.start();

this works same as setTimeout(…), i.e., executes myfunction1() and myfunction2() simultaneously one time after the specified interval. plus, you have the ability to stop or pause it anytime. is that sufficient for you? well, there’s more.

imagine, you are building an ajax driven webmail interface (for example, consider gmail). you have a clock showing current time in user’s inbox. also, you want to check if there is internet connection available in every 3 seconds. and you want to check for new mails in every 10 seconds. you may want more, but i will show you a skeleton program of these three feature using Timer object. your code should be something like this:

function update_clock(){
//code to update the clock
}

function check_connection(){
//code to check if there is connectivity with your server
//a simple XMLHttp request may be.
}

function check_mail(){
//an XMLHttp request to check for new mails
}

var timer = new Timer();
timer.interval(1000)
.addCallback(update_clock)
.addCallback(check_connection, 3)
.addCallback(check_mail, 10)
.start();

isn’t that too easy for that complex task? notice the second parameter in addCallback method. think like, the Timer object generates a pulse at given interval. the second parameter of addCallback method tells Timer object that this callback method should be executed at every Nth pulse; where N=1, 2, 3, … (here, N=3, 10). the seconds parameter, N, is optional and default value is 1.

now, off the record, someone asked me, if it can trigger a callback function (say, check_connection function from the example above) in 1.5 second interval!!! whoever is thinking to pass 1.5 (that is the quickest solution, i guess) as the second parameter, please dont. it only accepts integer number. but, there’s a work around. you need to learn some elementary math and come back here. then you will come-up with a solution like this:

var timer = new Timer();
timer.interval(500)
.addCallback(update_clock, 2)    //500 * 2 = 1000
.addCallback(check_connection, 3)    //500 * 1.5 * 2 = 1500
.addCallback(check_mail, 20)    //500 * 10 * 2 = 10000
.start();

thats a good solution and this is what i had in mind . wait, one question is still hanging.

what will happen if i add .runOnce(true) just above .start() in the example above?

well, what is desired? i think, each callback function should be executed exactly once. thats what i implemented. so, regardless of continuous pulses provided by Timer object, update_clock() will execute exactly once after 1 sec, check_connection() will execute once after 1.5 sec and check_mail() will execute once after 10 sec. then the timer will stop. any suggestion?

well, there are still few more functions left to mention. but, they are too easy to explain. see API Reference for description/usage of functions of Timer object.

lastly be sure to have a good asp.net web hosting provider, it can make all the difference. for any suggestion, bug report or query, please leave a comment. hope you like it.

Links:

• API Reference
• Source Code
  
• Examples

Tags | advanved timer, callback, JavaScript, multiple callback, object oriented, timer