复制此 Live Time 核心功能

Question

我正在尝试开发一个简单的 LiveDateTime 对象，该对象可靠、准确并且在某种程度上独立于客户端系统日期，就时间更新而言。

我尝试了几种解决方案：

利用服务器日期和客户端系统日期的时间差计算经过的时间，每150ms更新一次时间
获取客户端系统 UTC 日期并使用 setInterval() 或 setTimeout() 每 1000 毫秒增加一秒。还尝试了自校正延迟循环。
上面的一些类似变体。

以上都不符合要求，要么是因为如果更改了客户端系统日期，它也会将实时时间设置为关闭，要么只是循环的延迟不准确并且随着时间的推移而漂移。

所以，我决定上网搜索一些流行的网站，这些网站已经实现并运行了我想要的内容。我偶然发现了这个 Greenwich Mean Time 示例，它可靠、准确并且在某种程度上独立于客户端系统。如果我更改系统日期，它们显示的日期不受影响。

检查他们的代码后，我发现很难理解他们在做什么我可以复制，因为要么他们的代码写得不好，要么我不够先进，无法理解它。

我知道他们使用 AJAX 调用 (request.js) 到服务器以获取某些东西（也许是服务器时间）。而且他们正在使用 setInterval(func, 150) 和一大堆其他表示方法，我认为这些方法不是实时功能的核心。

谁能帮我弄清楚他们准确直播时间的核心功能？如果我能弄明白，从那里我就很容易复制了。

Answer 1

该示例结合服务器端语言获取服务器时间。时间是通过PHP直接写到JS里的，比如这一行：

var ServerDSTCheck = new Date(parseFloat(1426849548940.7)).getTime();

那个浮点数1426849548940.7来自服务器，这就是它不受客户端机器时间影响的原因。 AJAX 每隔一段时间调用 returns 相同的东西来维护服务器时间，因此它不会在客户端上被弄乱并避免客户端延迟。

这就是您需要的基础。代码的其余部分是关于夏令时、时区补偿和展示内容的。

Answer 2

据我了解，您希望在 JS 中使用独立时钟，对吗？这很简单：

在用户加载脚本时向您的服务器发出 ajax 请求，以获取当前时间 (UNIX)。
设置间隔，例如 1 秒，然后根据您选择的间隔增加您在第 1 部分获得的时间。

当用户在本地计算机上更改他的时间不会影响脚本，刷新脚本也会再次从您的服务器加载时间。

Answer 3

由于默认情况下 js 计时器非常不可靠，我会说你必须使用两个并行间隔。

一个将纠正前端相对于服务器时间的时间漂移，另一个将填补前端的空白（以免服务器和用户的连接紧张）。

var time = Date.now(); // Or initial server time
var oldTime = Date.now();
var newTime = oldTime;

var feInterval = setInterval( function() {
    // Incrementing "time" by whatever frontend difference, aka Delta time
    time += ( newTime = Date.now() ) - oldTime;
    oldTime = newTime;
 }, 40 );

var beInterval = setInterval( function() { 
    // Fetch server UTC milliseconds and overwrite "time".
    // Above interval will just use that as a new base time.
    var serverTime = Math.random() * 10000000000; //use Ajax to get server time.
    time = serverTime;
 }, 10000 );

setInterval( function() {
    // Do something with "time"
    // This interval is just for demo, you don't need it in general - use your own "time" consumer.
    console.log( 'Fairly correct time (random each 10 seconds):', new Date ( time ).toString() );
}, 40 );

Answer 4

我想还有其他人正在尝试解决同样的问题，

查看下面的页面，

复制此 Live Time 核心功能

Replicating this Live Time core functionality

javascript

php

time

date