Question

我正在为朋友的业务构建一个webapp（称为＆＃34; noticeboard＆＃34;），以帮助他们的打包和发送操作。它是使用HTML，CSS＆amp; amp; JS。后端使用PHP / MYSQL构建。

布告栏是为了员工的利益，并显示派遣截止时间（＆＃34;事件＆＃34;）次，即如下：

派遣时间1：09:00
派遣时间2：11:30
派遣时间3：14:30
派遣时间4：16:00

他们会定期更新这些时间，因为他们的日程安排取决于他们的送货公司的时间表。每隔15分钟就会运行一次AJAX请求，只需从数据库中获取最新时间（JSON格式）并更新布告栏。虽然我可以简单地实现一个＆＃34;自动浏览器刷新＆＃34;每15分钟，我发现这有点不一致，有时无法找到＆＃34;页面＃34;将显示错误消息。

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

系统在Windows 10上运行的Chrome浏览器中全天候运行。机器上没有其他任何内容正在运行。

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

我可以使用哪些技术来实现此功能？我一直在阅读setTimeout()和setInterval()等内容，但我不确定这些内容是否能够自动更新＆＃34;一旦它们被设定（即如果事件时间改变），它们自己。我需要查看基于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;

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

构建闹钟样式应用程序

1 个答案: