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/的工作演示