Here's a page timer I'm using - right now it's set to 15 seconds and
displays the current count every second in a div with id "timer".
There's probably a more elegant solution, but this can at least be a
start. The key is clearing the "setTimeout" function when the timer
gets reset, as just setting the "setTimeout" function again won't stop
the previous timer but start a new instance.
--------------------------------------------------------
My code:
---------------------------------------------------------
/**
* When the document is ready, start the timer (startTimer();) and
* bind all mouse movement to "resetTimer();"
*/
$(document).ready(function() {
startTimer();
$(window).bind("mousemove", function() { resetTimer();
});
});
/**
* Some vital global variables for the timer
*/
var timerId = 0;
var counterId = 0;
/**
* Start the timer
*/
function startTimer()
{
alertTimerId = setTimeout('refreshPage()', 15000);
updateCounter('15');
}
/**
* Reset the Timer
*/
function resetTimer()
{
clearTimeout ( alertTimerId );
clearTimeout ( counterId );
startTimer();
}
/**
* Refresh the Page
*/
function refreshPage()
{
var sURL = unescape(window.location.pathname);
window.location.replace( sURL );
}
/**
* Update the on-page Counter
*/
function updateCounter(count)
{
count = count - 1;
$('#timer').html(count);
counterId = setTimeout('updateCounter(\''+count+'\')',
1000);
}
