设置客户端时间实时服务器时间和更新

Question

这里的情况..

我有一个阵营是通过一个RESTful API连接到我的PHP后台负责处理，存储和提供所有的数据建立了一个JavaScript的前端。我需要能够显示PHP服务器的当前实时对客户端的JavaScript应用程序（逐行滴答秒，分钟和小时）的时间。

我得到了PHP服务器的当前时间戳和发送该回来的第一个请求的API。

我可以使用JavaScript的setTime方法在前端显示该很轻松了，但我的问题是实时（使用setInterval），而不必查询新服务器日期每秒这将是疯狂的API如何更新此。

我理解并知道如何来显示当前的时间与JS：

例如，要显示一个滴答作响的时钟24小时，我会做...

setTime = () => {
  this.time = new Date().toLocaleTimeString('en-US', {
    hour12: false
  });
  this.clock.innerText = this.time;
}

componentDidMount() {
  this.interval = setInterval(this.setTime, 1000);
}

...但我竭力想初始化的日期到服务器时间戳的方式，而无需发送新的Ajax请求的PHP服务器的时间戳的每一秒。

我认为有一种方法来设置日期只有一次，然后启动时钟滴答作响，而无需得到新的日期每一秒，但我可能是错的？

Answer 1

好吧尝试一些事情后，我找到了这一点。这绝不是完美的，肯定不会是任何长度的时间后，准确的，但它是其他任何人试图类似的起点。

我想你可以做一个API调用服务器时每分钟一次（不是那么糟糕），并更新时间戳变量，使其多一点准确。您还可以添加延迟为旅游和setInterval火为最初的时间戳太。因为它代表这将是它需要的API发回时间戳+它需要被添加到调用栈+渲染+的“显示时间”的setInterval的时间的时间实际上会被滞后。我猜可能加入2秒（2000年）的时间戳timestamp = (1549149560 * 1000) + 2000;将覆盖它。

如果有人更准确的方式来做到这一点知道我很乐意听到它。

var d = null;
var timestamp = null;

function setTime() {
  timestamp = 1549149560 * 1000; // This would be the PHP timestamp * 1000
  d = new Date();
  d.setTime(timestamp);
  setInterval(updateTime, 1000);
}

function updateTime() {
  d.setSeconds(d.getSeconds() +1);
  document.getElementById('time').innerText = d;
}

setTime();

<div id="time"></div>