時鐘由服務器然後通過客戶端運行初始化晚

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(); 

但時鐘變成約5秒晚各10分鐘。

我該如何防止這種延遲？

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();