如何制作也可以在后台运行的计时器？答案

【问题标题】：How to make timer that can run on background also?如何制作也可以在后台运行的计时器？
【发布时间】：2013-07-23 23:44:11
【问题描述】：

我正在研究 Rails 并编写了用于显示从 00:00:00 开始的计时器的 javascript 代码。

[注意：我有两个按钮 start 和 stop 用于启动计时器和停止计时器]

功能计时器（）{ var 秒、分、小时；秒=0；最小=0；小时=0；秒++；如果（秒>=60）{ 分钟++；秒=0； } 如果（分钟> = 60）{ 小时++；最小=0； } document.getElementById("hrs").innerHTML=hrs; document.getElementById("min").innerHTML=min; document.getElementById("sec").innerHTML=sec; 设置超时（定时器（），1000）； }

现在这在我的 Rails Web 应用程序中运行良好。但是，如果我将重定向到另一个页面并返回到此页面，我将丢失计时器值。

在这里，我也希望在页面重定向后时钟继续运行。

如何解决这个问题？

【问题讨论】：

您可以使用HTML 5 Storage 存储计时器开始时的开始时间。然后在页面加载时查找该值并重新计算已滴答的时间

标签： javascript timer ruby-on-rails-3.2 countdowntimer

【解决方案1】：

因为您正在重定向，所以 java 脚本计时器将不起作用。您应该改用系统时间。您可以在从页面重定向时从会话变量中获取一些帮助，以保存计时器启动时的时间戳。

【讨论】：

【解决方案2】：

获取时间戳...将其保存在某处并将其作为变量传递到下一页

var start=new Date().getTime();

时间过去了

var currentMillisecondsPassed=new Date().getTime()-start;

将其转换为hh:mm:ss.msec 或其他...

下一页只需要start 值，并且有很多方法可以传递它。 php、js、get、post....等等。

setTimeout() 对于计时器也不精确。

这是一个使用查询字符串传递值的示例。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>timer</title>
<script>
window.onload=function(){
 var pt=window.location.search.split('=')[1],
 e=document.body.childNodes,
 t=e[0],
 s=(pt*1||0),
 interval,
 ms2Time=function(a) {
  var ms=parseInt((a%1000)/100),
  s=parseInt((a/1000)%60),
  m=parseInt((a/(1000*60))%60),
  h=parseInt((a/(1000*60*60))%24);
  return (h<10?'0'+h:h)+':'+(m<10?'0'+m:m)+':'+(s<10?'0'+s:s)+'.'+ms;
 },
 Start=function(){
  s=new Date().getTime();
  interval=window.setInterval(getcurrent,100);
 },
 Stop=function(){
  window.clearInterval(interval);
  s=0;
 },
 getcurrent=function(){
  t.textContent=ms2Time(new Date().getTime()-s);
 },
 changepage=function(){
  window.location='?start='+s;
 };
 e[1].addEventListener('click',Start,false);
 e[2].addEventListener('click',Stop,false);
 e[3].addEventListener('click',changepage,false);
 if(pt&&pt!=0){
  interval=window.setInterval(getcurrent,100);
 }
}
</script>
</head>
<body><div id="timer"></div><button>start</button><button>stop</button><button>anotherpage</button></body>
</html>

正如我所说...您可以将起始值存储在任何地方...所以如果您有任何偏好...请告诉我，我可以为您更改代码。

【讨论】：

非常感谢您的帮助。这对我很有帮助
这段代码现在可以工作吗？

【解决方案3】：

您可以使用会话或 cookie 设置变量 sec, min, hour 的初始值。并将此文件包含在您希望计时器在后台运行的所有页面中。

function timer(){

sec++;

if(sec>=60){
min++;
sec=0;
}

if(min>=60){
hrs++;
min=0;
}

setTimeout(timer(), 1000);
}

并且仅在您显示计时器的页面中将值添加到 DOM。

【讨论】：

setTimeout 不能保证在每个都运行一次，因此以这种方式实现的时钟总是会以不同的数量“失去时间”。

【解决方案4】：

尝试从服务器发送默认的 sec、min 和 hrs 值，例如将它们保存在 cookie 中。

【讨论】：