Clock инициализируется сервер затем запустить клиентом поздно

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