This page demonstrates how to use the named-timers plugin in a jQuery browser context. 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 setTimerCallback. 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
);
Timers are repeating by default, but a one-off timer can also be created (internally using setTimeout) that will only fire once, after the given interval. This timer type can be created by passing in true as the second argument to createTimer:
$.namedTimers().createTimer("oneOffTimer", true).startTimer(10000,
function(){
// This timer only fires once after being started - there's no need to stop it on the first tick
$('#outputDiv').text("One-off timer has fired!");
}
);
Here's an example of a one-off timer in action (it fires after 10 seconds; its function can be changed before the delay is started, or even during the delay):
Create some timers below using the "Create contextual timer" button to see examples of timers being created within a jQuery context. Each of them defaults to a 2 second interval. Note that when the timer's callback function is updated with setTimerCallback 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.