建议每分钟更新时间的方法答案

【问题标题】：Suggest a way to update time every minute建议每分钟更新时间的方法
【发布时间】：2012-01-13 09:31:34
【问题描述】：

我有一个完整的 ajax 应用程序。我正在使用下面的代码每分钟更新一次时间。但是，如果我将浏览器保持打开超过 10 分钟，浏览器将变得无响应/缓慢。建议更好的代码。

function tick()
{
    var d = new Date();
    var time = padNumber(d.getHours(),2)+':'+padNumber(d.getMinutes(),2);
    $('#WeatherBoLfTime').html('&nbsp;'+time);
    t = setInterval('tick()',60000);
}

$(document).ready(function(){
    tick();
})

【问题讨论】：

见bonsaiden.github.com/JavaScript-Garden/#other.timeouts，特别是“隐藏使用eval”
如果你只依赖一个 setTimeout，你的代码会在用户让他的电脑进入睡眠状态然后再打开它时中断。见下文;您需要的不仅仅是 setTimeout！

标签： javascript jquery time

【解决方案1】：

问题是您多次调用setInterval 并且从未清除其中任何一个。因此，一段时间后，您将在大约同一时间运行大量间隔回调。

改变

t = setInterval('tick()',60000);

到

t = setTimeout(tick,60000);

当我第一次开始编写 JavaScript 代码时，我使用 AJAX 调用关闭了一个 Lycos Web 服务器，因为我犯了同样的错误 :-)

请注意，由于您显示的是实际时间，因此您应该使用比 1 分钟短得多的计时器。如果我在 13:42:30 登陆您的网页，则时间要到 ~13:43:30 才会更新。为了使其与机器的时间保持同步，您可能需要为1000 设置计时器。

【讨论】：

这将导致计时器只运行一次。
@Johan：不，因为它是一个递归计时器调用。请正确阅读代码。
当用户让他的计算机进入睡眠状态然后重新打开它时，它会中断。见下文。
@frenchie：OP 没有要求与服务器保持时间同步。 Stack Overflow 似乎充满了今天无法正确阅读的人。请撤回您的反对票。
@AndyE：我们的想法不是让页面与服务器保持同步，而是通过使用服务器作为固定参考点与自身保持同步。

【解决方案2】：

setInterval() 设置间隔。您只需要设置一次，它将每 60000 毫秒自动调用一次。 setTimeout() 是您每次都必须重新设置的那个。

【讨论】：

当用户让他的计算机进入睡眠状态然后重新打开它时，它会中断。见下文。

【解决方案3】：

正如其他人所指出的，您每次都在创建新的间隔。将它移到你的函数之外。

function tick()
{
    var d = new Date();
    var time = padNumber(d.getHours(),2)+':'+padNumber(d.getMinutes(),2);
    $('#WeatherBoLfTime').html('&nbsp;'+time);
}

$(document).ready(function(){
    t = setInterval(tick,60000);
})

编辑：我很慢，其他答案似乎已更新。所以这个现在没用了:)

【讨论】：

当用户让他的计算机进入睡眠状态然后稍后再打开它时，它就会中断。见下文。
@frenchie：除非 setInterval 实际上完全停止运行（这会弄乱所有方法），否则这将起作用。在滴答声再次运行之前，时间可能会过期一分钟，但是当它运行时，时间将被正确设置（因为它每次显示时都会获取时间，而不仅仅是增加已经存在的时间）。
@frenchie：没有提到它必须在客户睡觉时工作。我的答案适用于给定的问题。像所有其他人一样。没有必要投反对票..

【解决方案4】：

看看下面的演示代码，它会每秒更新一次...

<!DOCTYPE html>
<html>
<head>
	<title>j</title>
	<script type="text/javascript">

   function myFunction() 
   {
       setInterval(function(){ 
            var d = new Date(); 
            document.getElementById("dates").innerHTML = new Date(d.getTime());}, 1000);
   }
			
	</script>
</head>
<body>
	<input type="button" name="e" onclick="myFunction()">
	<p id= "dates">ok</p>
</body>
</html>

【讨论】：