This page demonstrates how to use the jquery-named-timers plugin. That context-free timer at the top-right increments every second, and is created with the following code:
$.namedTimers().createTimer("contextFreeTimer").startTimer(1000,
function(){
// Must get element using selector; this refers to window in this context.
var counter = $('#h1ContextFreeTimer').data('counter');
if (counter === undefined) { counter = 0; }
counter++;
$('#h1ContextFreeTimer').data('counter', counter).text(counter);
}
, true
);
Internally, the plugin uses setInterval to power the timers. First, a timer must be created and given a name using createTimer. This timer can then be started with startTimer, which takes 3 arguments, the latter 2 being optional. The first argument is the delay time of the timer in milliseconds. The second is the callback function to run on each tick - this can be set separately (including after the timer has started in order to change its callback function while running) using setTimerFunction. The third argument is a boolean determining whether the timer's callback will run immediately upon start, or wait until the first timer tick; the default is false.
As this timer was started outside of a jQuery selector context, the value of this will probably refer to window when the code runs. For convenience, timers can also be started from a jQuery selection, which will cause this to refer to the jQuery selection context when the code runs, for example:
$('#contextualTimer123').namedTimers().createTimer("timer123").startTimer(2000,
function(){
// Can use jQuery context to set HTML & associated data; this refers to the jQuery object here.
var counter = this.find('.timerCounter').data('counter');
if (counter === undefined) { counter = 0; }
counter++;
this.find('.timerCounter').data('counter', counter).text(counter);
}
, true
);
Create some timers below using the "Create contextual timer" button to see examples of this. Each of them defaults to a 2 second interval. Note that when the timer's callback function is updated with setTimerFunction outside of a jQuery selector context, its existing context (if any) will be maintained, but when it's updated from within a jQuery selector context, its context will be updated to this new selector context.
In addition to createTimer, the NamedTimerCollection returned by namedTimers also provides a deleteTimer function, which deletes the given named timer (stopping it first if necessary), and a getTimers function, which retrieves all of the currently created named timers. Click "Refresh timers list" to see the output of getTimers; it will change as you add/delete timers to/from the page.