Question

这是情况。

我有一个用React构建的javascript前端，它通过RESTful API连接到我的PHP后端，该后端处理，存储和提供所有数据。我需要能够在客户端javascript应用程序上实时显示PHP Server的当前时间（逐行滴答秒，分钟和小时）。

我正在获取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);
}

...但是我正在努力思考一种将日期初始化为服务器时间戳的方法，而不必每秒为该时间戳向PHP服务器发送一个新的Ajax请求。

我认为有一种方法可以只设置一次日期，然后开始计时，而不必每秒获取新日期，但是我可能是错的吗？

Answer 1

好吧，尝试了一些事情后，我对此感到沙沙。这绝不是完美的，经过一段时间后肯定不会准确，但这是其他任何人尝试类似事物的起点。

我想您可以每分钟对服务器时间进行一次API调用（还不错），并更新timestamp变量以使其更加准确。您也可以添加旅行的延迟，并将setInterval触发为初始时间戳。从目前的情况来看，这将是API发送回时间戳+添加到调用堆栈所需的时间+呈现+“显示时间”实际上将滞后的setInterval。我猜想可能在时间戳timestamp = (1549149560 * 1000) + 2000;上加上2秒（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>

将客户端时间设置为服务器时间并实时更新

1 个答案: