Javascript时钟服务器时间

Question

我需要在时钟上显示服务器的时间。下面是我目前的代码。我有Ajax调用的服务器时间。问题是，如果用户改变了它的本地/计算机时钟，它也将更新脚本的时钟，这是不可能的-它应该继续不改变，我被困。我尝试过在serverTime中传递setTimeout，所以每次都会将它作为引用使用，但没有任何进展。

​

var serverTime  = 1490856278000;
var localTime   = +Date.now();
var timeDiff    = serverTime - localTime;
var realTime;
var date;
var hours;
var minutes;
var seconds;
setInterval(function () {
  realTime = +Date.now() + timeDiff;
  date     = new Date(realTime);
  hours    = date.getHours();
  minutes  = date.getMinutes();
  seconds  = date.getSeconds();
  document.getElementById('clock').innerHTML = hours + ':' + minutes + ':' + seconds;
}, 1000);

<div id="clock"></div>

​

Answer 1

您应该能够将每个realTime与setInterval中的最后一个进行比较。如果与预期的1000 is相差甚远，请执行ajax调用，再次查询服务器时间并更新timeDiff。

此外，您还可以尝试使用performance.now而不是Date.now。更高的分辨率是不必要的，而且可能很昂贵，但是MDN指出

与Date.now()不同，Performance.now()返回的值总是以恒定的速率增长，不依赖于系统时钟(系统时钟可能被手动调整或由NTP之类的软件倾斜)。

Answer 2

使用How to create an accurate timer in javascript?和Bergi的答案，我准备了另一种方法。我想你根本不用利用当地时间：

​

var serverTime  = 1490856278000;
var expected = serverTime;
var date;
var hours;
var minutes;
var seconds;
var now = performance.now();
var then = now;
var dt = 0;
var nextInterval = interval = 1000; // ms

setTimeout(step, interval);
function step() {
    then = now;
    now = performance.now();
    dt = now - then - nextInterval; // the drift
    
    nextInterval = interval - dt;
    serverTime += interval;
    date     = new Date(serverTime);
    hours    = date.getUTCHours();
    minutes  = date.getUTCMinutes();
    seconds  = date.getUTCSeconds();
    document.getElementById('clock').innerHTML = hours + ':' + minutes + ':' + seconds;

    console.log(nextInterval, dt); //Click away to another tab and check the logs after a while
    now = performance.now();

    setTimeout(step, Math.max(0, nextInterval)); // take into account drift
}

<div id="clock"></div>

​

Answer 3

时间会改变，因为Date.now();正在从客户端机器获得时间。脚本中没有AJAX调用。