基于本地时钟的 Javascript 事件触发器

Question

我有一个场景，其中一台客户端 PC 将驱动多个 LCD 显示器，每个显示器显示一个浏览器窗口。这些浏览器窗口使用 jquery 显示动画循环中的不同数据。

我需要确保两个浏览器可以同步旋转以完全同时旋转，否则它们将在不同时间显示动画。

所以我的问题是 - 我可以触发 jquery 以根据本地 PC 时钟交替显示内容吗？

例如每次时钟秒 == 0，显示版本 1，每次时钟秒 == 30，显示版本 2 等等？

Answer 1

这是(根据我的经验)让计时器尽可能接近时钟时间触发的最精确方法:

// get current time in msecs to nearest 30 seconds
var msecs = new Date().getTime() % 30000;

// wait until the timeout
setTimeout(callback, 30000 - msecs);

然后，在回调中，一旦一切都完成，再次执行相同的操作以触发下一个事件。

使用 setInterval 会导致其他问题，包括时钟漂移。基于当前时间的计算占执行回调本身的时间。

您还需要使用 Date().getTime() 来确定要显示动画的哪一帧。

整个事情看起来像这样:

function redraw() {
    var interval = 30000;

    // work out current frame number
    var now = new Date().getTime();
    var frame = Math.floor(now / interval) % 2; // 0 or 1

    // do your stuff here
    .. some time passes

    // retrigger
    now = new Date().getTime();
    setTimeout(redraw, interval - (now % interval));
}

redraw();

工作演示在 http://jsfiddle.net/alnitak/JPu4R/