javascript - 构建闹钟风格的应用程序

Question

我正在为 friend 的企业构建一个网络应用程序(称为“公告板”)，以帮助他们进行打包和发送操作。它是使用 HTML、CSS 和 JS 构建的。后端是用PHP/MYSQL构建的。

布告栏是为了员工的利益而设置的，并显示调度截止(“事件”)时间，如下所示:

• 发送时间 1:09:00
• 发送时间 2:11:30
• 发送时间 3:14:30
• 发送时间 4:16:00

他们会定期更新这些时间，因为他们的时间表取决于送货公司的时间表。每 15 分钟运行一次 AJAX 请求，它只是从数据库中获取最新时间(JSON 格式)并更新布告栏。虽然我可以简单地实现每 15 分钟一次“浏览器自动刷新”，但我发现这有点不一致，有时会显示“找不到页面”错误消息。

布告栏还显示实时时钟。我使用 moment.js 构建了这个。

系统在 Windows 10 上运行的 Chrome 浏览器中全天候 (24/7) 运行。计算机上没有运行其他任何东西。

目前布告栏仅显示这些时间。我需要更进一步，让它的功能几乎像闹钟一样。我基本上希望实现的是在每个事件发生前 15 分钟，它需要突出显示即将发生的事件时间(即使用 jQuery addClass())。然后，一旦到达该事件时间，就播放蜂鸣器声音(某种 MP3 文件)。这需要每天针对每个事件自动发生。请记住，事件时间总是在变化，因此需要足够智能才能识别这一点。

我可以使用哪些技术来实现此功能？我一直在阅读诸如 setTimeout() 和 setInterval() 之类的内容，但是我不确定它们一旦被调用后是否能够“自动更新”自己设置(即，如果事件时间发生变化)。我需要查看基于 NodeJs 的解决方案吗？我在 NodeJs 方面没有任何经验，但如果这是实现这一目标的最佳方法，那么我愿意尝试一下。否则我非常乐意尝试用 vanilla JS 来尝试一些东西。

这是我如何使用 setTimeout() 来实现它，但显然这不会动态更新:

// set the number of ms to 15 mins before the event time
var eventInterval = 36000000;

// setTimeout function for the event
setTimeout(function() {
    // add "active" class to highlight the event
    $('.event').addClass('active');

    // after 15 mins have elapsed, remove the "active" class
    setTimeout(function() {
        $('.event').removeClass('active');
    }, 90000);
}, eventInterval;

Answer 1

你的方法很好，但是，每次收到 AJAX 响应时你都需要这样做。 setTimeout 返回一个 timeoutId，然后您可以使用它来通过 clearTimeout(timeoutId) 取消超时。

var reminderTime = 15 * 60 * 1000;
var timeoutIds = [];

function setTime(timestamp) {
    // Set the interval 15 minutes before the event time.
    var interval = timestamp - reminderTime;
    var timeoutId = setTimeout(function() {
        // add "active" class to highlight the event
        $('.event').addClass('active');

        // after 15 mins have elapsed, remove the "active" class
        setTimeout(function() {
            $('.event').removeClass('active');
        }, 90000);
    }, interval);

    timeoutIds.push(timeoutId);
}

$.get("http://myserver/getTimes", function(times) {
    // Reset all the setTimeouts
    timeoutIds.forEach(function(timeoutId) {
        clearTimeout(timeoutId);
    });
    // Assuming times is an array of timestamps
    times.forEach(setTime);
});