構建鬧鐘樣式應用程序

Question

我正在爲朋友的業務構建webapp（稱爲「布告牌」），以幫助他們進行打包和發送操作。它使用HTML，CSS & JS構建。後端使用PHP/MYSQL構建。

布告欄爲他們的工作人員的利益，並顯示分派切斷（「事件」）倍，即，如下所示：

• 派送時間1：09:00
• 派送時間2：11:30
• 派送時間3：14:30
• 派送時間4：16:00

他們定期更新這些時間，因爲他們的時間表取決於他們的送貨公司的時間表。有一個AJAX請求每15分鐘運行一次，它只是從數據庫中提取最新時間（JSON格式）並更新通知板。雖然我可以每隔15分鐘簡單地實現一次「自動瀏覽器刷新」，但我發現這有點不一致，有時會顯示「無法找到頁面」錯誤消息。

該佈告板還顯示一個實時時鐘。我已經使用moment.js構建了這個。

系統在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; 

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