Javascript 构建闹钟样式的应用程序

我正在为一个朋友的业务构建一个webapp（称为“公告栏”），以帮助他们进行打包和发送操作。它是使用HTML、CSS和JS构建的。后端是在PHP/MYSQL中构建的

布告栏是为了员工的利益，并显示调度截止（“事件”）时间，即如下所示：

• 调度时间1:

  09:00

• 调度时间2:11:30
• 调度时间3:14:30
• 调度时间4:16:00

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

布告栏上还显示了一个实时时钟。我已经建立了这个使用

该系统在Windows 10上运行的Chrome浏览器中全天候运行。机器上没有别的东西在运转

目前，布告栏只显示这些时间。我需要更进一步，让它像闹钟一样工作。我基本上希望实现的是在每个事件前15分钟，它需要突出显示即将到来的事件时间（即使用jQuery

addClass（）

）。然后，一旦达到该事件时间，播放蜂鸣器声音（某种MP3文件）。这需要每天对每个事件自动执行。请记住，活动时间总是在变化，因此它需要足够聪明才能认识到这一点

我可以使用哪些技术来实现此功能？我一直在阅读

setTimeout（）

和

setInterval（）

之类的内容，但我不确定这些内容在设置后是否能够“自动更新”（即，如果事件时间发生变化）。我需要看看基于nodeJs的解决方案吗？我在nodeJs方面没有任何经验，但如果这是实现这一目标的最佳方式，那么我愿意尝试一下。否则，我非常乐意尝试香草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;

---

您的方法很好，但是，每次得到AJAX响应时都需要这样做

setTimeout

返回一个

timeoutId

，然后您可以使用

clearTimeout（timeoutId）

来取消超时

---

sql作业可以做什么

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);
});