Question

我想创建时钟，其时间由服务器初始化，然后继续使用此代码的客户端：

//initializing by server(ASP.NET):
<% var now=System.DateTime.Now; %>
var h=<%=now.Hour %>;
var m=<%=now.Minute %>;
var s=<%=now.Second %>;

//then client:
function startTime() {
   s++;
   if (s == 60) {
       s = 0;
       m++;
       if (m == 60) {
           m = 0;
           h++;
           if (h == 24)
               h = 0;
       }
   }
   m = checkTime(m);
   s = checkTime(s);
   h = checkTime(h);
   document.getElementById('clock').innerHTML = h + ":" + m + ":" + s;
   t = setTimeout(function () { startTime() }, 1000);
}

function checkTime(i) {

   if (i < 10) {
       if(i.toString().length<2)
           i = "0" + i;
   }
return i;
}
window.load = startTime();

但是时钟每10分钟变成大约5秒钟。

如何防止此延迟？

Answer 1

setTimeout不够精确，无法做到准确的计时。即使没有其他任何事情发生，它也很容易被10ms所取消。在很长一段时间内，这会扭曲你的时钟。

实现时钟的另一种方法是使用本机Date对象为您进行计算，依赖于系统时钟，并仅使用setTimeout直观地更新时间。

现在由于setTimeout无法可靠地每秒更新一次，因此您可以设置为100ms，因此它会尝试每秒更新10次。如果你的时间计算不是太重，那么这应该很好。

查看规范以了解如何使用Date：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date（Mozilla Firefox）

Answer 2

改为使用：

//initializing by server(ASP.NET):
<% var now=System.DateTime.Now; %>
var d=new Date();
var h=<%=now.Hour %>;
var m=<%=now.Minute %>;
var s=<%=now.Second %>;
var sec=d.getSeconds();

//then client:
function startTime() {

    var date = new Date();
    if (date.getSeconds() != sec) {
       sec = date.getSeconds();
       s++;
    }
   if (s == 60) {
       s = 0;
       m++;
       if (m == 60) {
           m = 0;
           h++;
           if (h == 24)
               h = 0;
       }
   }
   m = checkTime(m);
   s = checkTime(s);
   h = checkTime(h);
   document.getElementById('clock').innerHTML = h + ":" + m + ":" + s;
   t = setTimeout(function () { startTime() }, 100);
}

function checkTime(i) {

   if (i < 10) {
       if(i.toString().length<2)
           i = "0" + i;
   }
return i;
}
window.load = startTime();

由服务器初始化然后由客户端运行的时钟是迟到的

2 个答案: