Timer built using javascript gets reset when page is refreshed? How to avoid it?
Question
I am using a timer on my web page. The timer is built using javascript code. The function startTimer() is called on "body onload". So everytime the page is reloaded, the function startTimer() gets called and the timer gets reset. How can we avoid it? In other words is there any method by which we can call the function when body loads for first time only. Here is the code for the function startTimer().
<script type="text/javascript">
var running = false;
var endTime = null;
var timerID = null;
function startTimer() {
running = true;
now = new Date();
now = now.getTime();
// change last multiple for the number of minutes
endTime = now + (1000 * 60 * 140);
showCountDown();
}
function showCountDown() {
var now = new Date();
now = now.getTime();
if (endTime - now == 0) {
//stopTimer();
alert("Time is up.");
document.form1.submit();
} else {
var delta = new Date(endTime - now);
var theMin = delta.getMinutes();
var theSec = delta.getSeconds();
var theTime = theMin;
if(theMin==59){alert("Time is up.");
document.form1.submit();}
theTime += ((theSec < 10) ? ":0" : ":") + theSec;
document.form1.timerDisplay.value = theTime;
if (running) {
timerID = setTimeout("showCountDown()",1000);
}
}
}
function stopTimer() {
clearTimeout(timerID);
running = false;
document.form1.timerDisplay.value = "0:00";
}
</script>
The function above is called as follows:
<body onload="startTimer();">
3 answers
solution1
4 ACCPTED 2014-03-03 06:47:07
Whenever a page is readloaded, the entire context of the old page is destroyed and an entirely new context is created. You can't keep a timer from one page load running on the next page load.
If you need to save some state from one page load to the next and then in the next page load examine that state and decide exactly how to set up the initial page to match what was previously going on, then you can save state between page loads in either HTML5 local storage or in a cookie.
The other possibility is to NOT reload your page and instead update the contents of the page dynamically using ajax and javascript. That way your existing timer would just keep running because there would be no page reload at all.
If all you're trying to do with your timer is show how much time is left in some countdown, you can set the countdown zero time into HTML5 local storage and when the reloaded page loads, it can check the time set in local storage and start the countdown timer to match the time it was previously set for.
solution2
1 2014-03-03 07:01:51
First of all like what @jfriend00 said, if you created the timer by javascript, whenever the page is reloaded, it will re-create the timer.
If you used cookie/local storage, it can still be deleted by the end user.
The best way to do this functionality is to generate & store the time on the server-side, pass the values over to the client on page load, and the script will read the time from server, then start counting down.
solution3
0 2014-03-03 06:46:55
使用Cookie，或者如果使用HTML5，则使用本地/会话存储来保存状态。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.