刷新页面后，使用javascript构建的计时器会重置吗？ 如何避免呢？
[英]Timer built using javascript gets reset when page is refreshed? How to avoid it?
问题描述
I am using a timer on my web page. 
我在网页上使用计时器。 The timer is built using javascript code. 计时器是使用javascript代码构建的。 The function startTimer() is called on "body onload". 函数startTimer（）在“ body onload”上调用。 So everytime the page is reloaded, the function startTimer() gets called and the timer gets reset. 因此，每次重新加载页面时，都会调用函数startTimer（）并重置计时器。 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(). 这是函数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 个解决方案
解决方案1
4 已采纳 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. 如果您需要将某个状态从一个页面加载保存到下一个页面，然后在下一个页面加载中检查该状态，并准确确定如何设置初始页面以匹配之前的操作，则可以在两次页面加载之间保存状态在HTML5本地存储或cookie中。
The other possibility is to NOT reload your page and instead update the contents of the page dynamically using ajax and javascript. 另一种可能性是不重新加载页面，而是使用ajax和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. 如果您要使用计时器做的只是显示某个倒计时还剩多少时间，则可以将倒数零时间设置为HTML5本地存储，当重新加载的页面加载时，它可以检查在本地存储中设置的时间，启动倒数计时器，使其与之前的时间相符。
解决方案2
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. 首先，就像@ jfriend00所说的那样，如果您是用javascript创建的计时器，则每当页面重新加载时，它都会重新创建计时器。
If you used cookie/local storage, it can still be deleted by the end user. 如果您使用cookie /本地存储，则最终用户仍然可以删除它。
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. 实现此功能的最佳方法是在服务器端生成并存储时间，在页面加载时将值传递给客户端 ，脚本将从服务器读取时间， 然后开始递减计数。
解决方案3
0 2014-03-03 06:46:55
使用Cookie，或者如果使用HTML5，则使用本地/会话存储来保存状态。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.