Question

我需要在时钟上显示服务器时间。以下是我目前的代码。我通过Ajax调用获得服务器时间。问题是，如果用户更改它的本地/计算机时钟，它也会更新脚本的时钟，这是不行的 - 它应该继续而不会改变，我卡住了。我已经尝试在setTimeout中传递serverTime，所以它每次都被用作参考，但没有运气。

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毫秒，请执行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调用。

Answer 4

上午和下午的更多更新

var serverTime = 1490856278000;
    var expected = serverTime;
    var date;
    var h;
    var m;
    var s;
    var now = performance.now();
    var then = now;
    var dt = 0;
    var nextInterval = (interval = 1000);

    setTimeout(step, interval);
    function step() {
      then = now;
      now = performance.now();
      dt = now - then - nextInterval;
      nextInterval = interval - dt;
      serverTime += interval;
      date = new Date(serverTime);
      h = date.getHours();
      m = date.getMinutes();
      s = date.getSeconds();

      var session = "AM";

      if (h == 0) {
        h = 12;
      }

      if (h > 12) {
        h = h - 12;
        session = "PM";
      }

      h = h < 10 ? "0" + h : h;
      m = m < 10 ? "0" + m : m;
      s = s < 10 ? "0" + s : s;

      var time = h + ":" + m + ":" + s + " " + session;

      document.getElementById("NowTime").innerHTML = time;

      now = performance.now();

      setTimeout(step, Math.max(0, nextInterval));
    }

Javascript时钟 - 服务器时间

4 个答案: