Javascript:实现精确的时钟

Question

我正在大型应用程序的前端实现一个实时时钟。为此，我想出了以下方法 -

JavaScript

var span = document.getElementById('span');

function time() {
  var d = new Date();
  var s = d.getSeconds();
  var m = d.getMinutes();
  var h = d.getHours();
  span.textContent = h + ":" + m + ":" + s;
}

setInterval(time, 1000);

HTML

<span id="span"></span>

这种方法单独使用时效果很好，但是当将此代码集成到具有多个事件和函数调用的应用程序中时，时钟会在几小时后开始滞后几分钟，直到页面刷新。

我认为这种延迟是因为 setInterval 是一个网络(浏览器)API 并且是异步处理的，如果调用堆栈是由于事件循环的调用堆栈中存在其他函数调用/事件，注册 setInterval 后 1 秒后不为空。

所以如果页面长时间不刷新，延迟会继续增长。此外，该应用程序是用 Angular 编写的，它是一个单页应用程序，在页面被强制刷新之前，页面不会因为路由而在导航时重新加载。

那么如何在 JavaScript 中构建一个在集成到大型应用程序中时永远不会延迟的精确时钟？

更新:感谢大家的回复。我认为你们中的一些人是对的，我可能遗漏了一些细节。其实这几天我在工作中实现了这几天，但由于某种原因不得不离开它并且失去了它的踪迹。但是在使用 Date 和 Timers 时确实存在一些延迟问题。突然间，我想到了这一点，并想在这里问它。非常抱歉没有提供具体细节。

我仍然会尝试记忆细节并在可能的情况下相应地更新问题。

Answer 1

the clock starts lagging by few minutes after say couple of hours until the page is refreshed.

这对于您显示的代码是不可能的，new Date 应该返回正确的时间，无论您将其值反射(reflect)到页面的频率如何。

So if the page is not refreshed for long time the delay continues to grow.

今天的大多数浏览器都会稍微调整计时器，以便它们平均非常准确(例如，如果一个计时器被调用晚 1 毫秒，下一个将被调用早 1 毫秒)，因此您只能导致漂移超过如果您要离开页面，时间会更长，这将暂停计时器。不过，这仍然不会影响 new Date。

看看 Chromium source