ユーザーがブラウザを使用していないと、jQueryタイマーが停止する

Question

jQueryタイマーを作成しようとしていますが、ブラウザのフォーカスが合っていないか、最小化されていないと停止します。私の考えの1つは、Ajaxを使用してサーバーからデータを引き出し、タイマーを更新するコードですが、サーバーの負荷が高くなる可能性があります。ユーザがフロントエンドでブラウザを使用しているかどうかをチェックする方法はありますか？コードはAjaxリクエストを送信する必要があります。

私のjQueryタイマーコードスニペット。

(function timer (offset) { 
    setTimeout(function() { 
     var timestamp = {{ time }}; 
     timestamp = 5 * 60 - timestamp - offset; 
     var minutes = Math.floor(timestamp/60); 
     var seconds = Math.floor(timestamp % 60); 
     document.getElementById("timer").innerHTML = minutes + " : " + seconds; 
     timer(offset + 0.5); 
    }, 500); 
})(0); 

Answer 1

window.setTimeoutのdelayパラメータは、コールバックを実行する前not a guaranteed time時間の最小量です。タイムアウトで実行中の合計時間を維持する代わりに、タイマーの開始時間を格納し、現在の時間と比較します。 Performance.now()は、正確なタイムスタンプをミリ秒単位で表示します。