JavaScript 时钟：时间间隔冲突答案

【问题标题】：JavaScript clock: time interval conflictsJavaScript 时钟：时间间隔冲突
【发布时间】：2015-09-28 11:38:24
【问题描述】：

您好，我是编程新手，正在开发 JavaScript 时钟。我让它根据它是偶数还是奇数分钟来改变背景颜色，它每小时改变一次文本颜色。但是，我在集成第三个任务时遇到了麻烦：我试图让它每五分钟更改一次随机颜色，从而覆盖偶数或奇数语句。所以第 1 分钟：奇数，第 2 分钟：偶数，3：奇数，4：偶数，5：随机颜色。

由于每五分钟更改一次背景颜色的功能 (lines 75 to 83) 设置在一个间隔上，这与为获取日期设置的间隔 (line 71) 冲突。

就目前而言，任务 2 和 3 的效果在任务 1 被注释掉之前是不可见的。有没有办法将任务 1 与第 11-24 行的 if/else 语句结合起来，以便我的所有任务可以同时运行？

【问题讨论】：

你能展示你的代码吗？
代码的相关部分必须发布到您的实际问题中，不能仅通过外部链接获得。这是 StackOverflow 的一条规则，因为外部链接会随着时间的推移而消失或变化，从而使问题随着时间的推移变得无用。
你不应该使用 setInterval 因为它不需要在你指定的时间运行，所以每次运行都会稍晚一点（可能是纳秒，可能是毫秒，可能更多的）。使用 setTimeout 并计算每次下一次调用的时间。另外，不要设置多个间隔或超时，使用一个超时按要求的顺序运行所有逻辑。

标签： javascript setinterval clock

【解决方案1】：

使用单个计时器功能来执行所有事件。要获得更准确的计时，请将计时器设置为每 100 毫秒执行一次并维护一个计数器。根据计数器值，您可以按不同的时间间隔执行特定任务，还可以检查时间间隔的重叠。当计数器达到您需要跟踪的最大间隔时，可以重置计数器。

这是一个示例：

var counter = 0;
var oldsec = 0;
setInterval(function(){timerInt()}, 100);

function timerInt(){
    // Read system clock and get seconds
    if (seconds <> oldsec) {
        // Update clock time here and set oldsec=seconds
    }


    // Execute other tasks
    if (counter % 3000 == 0) {  // Executes once every 5 minutes (300*10)

    }
    else if (counter % 1200 == 0) {  // Executes once in 2 minutes (120*10)

    }
    else if (counter % 600 == 0) {  // Executes once a minute (60*10)

    }

    counter += 1;
    if (counter == 3000) counter = 0;
}

您可以使用if 和else 来控制要执行的任务。您的时钟秒数更新也会更准确，不会像使用 1000 毫秒计时器那样“跳过”秒数。

【讨论】：

这在时钟漂移或 setTimeout 回调因任何原因延迟的情况下将无法正常工作。
不可能有任何时钟漂移，因为我们会从系统时钟读取然后更新文本。如果由于某种原因回调被延迟，那么所有基于计时器的解决方案都会受到影响。无论如何，这是一个简单的时钟项目，我想不会有重型代码同时运行。 :)
您正是不从系统时钟读取数据。您假设回调将精确地每十分之一秒发生一次，但实际上它永远不会发生。我不认为一个不能准确计时的时钟是一个很好的时钟。有非常好的方法来处理这个问题。它们都是基于在每次回调时查询真实的系统时钟。
回调不需要精确到十分之一秒。是的，我将读取系统时钟并更新时间。我发布的代码是一个不完整的示例，仅显示了计时器循环的轮廓。抱歉，如果不清楚。
啊。我明白你的意思 - 最好每 100 毫秒检查一次时间，如果秒数与前一个时间相比有所变化（需要存储），则更新时间。已更新代码。