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

【问题标题】：Javascript event triggers based on local clock基于本地时钟的 Javascript 事件触发
【发布时间】：2012-01-10 05:56:45
【问题描述】：

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

我需要确保两个浏览器可以同步以完全相同的时间旋转，否则它们会在不同的时间播放动画。

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

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

【问题讨论】：

if (getSeconds() == 0) { } else if (getSeconds() == 30) { }
这并不能使它们同步。我需要一个事件在秒数变为 30 或 0 时准确触发
@hud，顺便说一下，我主要是告诉你getSeconds() 方法，它是Date 对象的方法。您实际上并不想投票。
@JustinSatyr 如果您使用getSeconds()，那么一秒钟将是计时的误差范围。真可怜。

标签： javascript jquery

【解决方案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/ 的工作演示

【讨论】：

【解决方案2】：

答案是：可以。

使用Date.getTime() 监控时间
每 30 秒触发一次 js 函数

【讨论】：

你是认真地建议他投票以适应时代的变化吗？
这不会使两个浏览器同步，因为我无法确保它们同时轮询

【解决方案3】：

你可以做这样的事情。这样，无论您何时启动不同的浏览器，它们的旋转都会同步。

var t=setInterval("check()",1000);
function check(){
    var d = new Date();
    if(d.getSeconds()  == 0)
    {
        alert('do something');
    } else if (d.getSeconds() == 30) 
    {
        alert('do something else');
    }
}

【讨论】：

【解决方案4】：

为什么不从另一个窗口启动一个窗口 - 这样父窗口将完全控制动画何时开始，因为它们处于相同的进程中。不需要时钟。

【讨论】：