目覚まし時計スタイルのアプリケーションを構築する

Question

私は友人のビジネスのためのパッケージングと発​​送作業を支援するwebapp（ "noticeboard"と呼ばれる）を構築しています。それは、HTML、CSS & JSを使用して構築されています。バックエンドはPHP/MYSQLで構築されています。次のすなわちとして、

noticeboardは、そのスタッフの利益のためであると表示がカットオフ（ "イベント"）を派遣回：

• 発送時期1：09:00
• ディスパッチ時間2：11:30
• ディスパッチ時間3：14:30
• ディスパッチ時間4：16:00

スケジュールは配送会社のスケジュールに依存するため、定期的に更新します。 15分ごとにAJAXリクエストが実行され、データベースから最新の時刻（JSON形式）を取り出して通知ボードを更新します。私は単に15分おきに "自動ブラウザのリフレッシュ"を実装することはできますが、これは少し矛盾していることがわかりましたが、「ページが見つかりません」というエラーメッセージが表示されることがありました。

noticeboardには、リアルタイムクロックも表示されます。私はmoment.jsを使ってこれを構築しました。

システムは、Windows 10で実行されているChromeブラウザでは24時間365日稼動します。それ以外はマシン上で実行されていません。

現在のところ、ノートボードは単にこれらの時刻を表示します。私はこれをさらに一歩踏み出し、目覚まし時計のように機能させる必要があります。私が基本的に達成しようとしているのは、各イベントの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); 
});