ブラウザーがフォーカスを失ったときに、Web ページ上の JavaScript カウンターをリアルタイムで更新するにはどうすればよいですか?

Question

Perl で書かれた HTML、CSS、JavaScript を使用してブラウザ ゲームを作成しています。健康状態とスタミナはサーバーに保存されており、JavaScript を使用して、現在のページが読み込まれるときにこれらの統計のライブ更新カウントをユーザーに表示します。この機能はうまく機能しますが、ユーザーがタブを切り替えたり、別のアプリに切り替えたりしてブラウザをバックグラウンドで実行したままにすると、戻ったときに表示されるカウント値が適切に維持されなくなります。そのため、ブラウザに戻ると、実際のスタミナは 100/1 であるにもかかわらず、カウンターには 50/100 のスタミナが表示される場合があります。

P粉514001887 · Answer

継続的なサーバープッシュも機能しません。フォーカスを失ったときに発生するタイマーやイベントなど、メインイベントループ内のすべてのものは、リソースを節約するためにブラウザによって速度が低下します。一部のモバイルブラウザでは完全に停止します。

問題の解決策は、アプリケーションがこれらの統計を追跡する方法を変更することです。

ここで、WebWorkers を使用して別のスレッドでタイマーを実行するという人もいますが、これですべての問題が解決されるわけではありません。誰かがスリープ状態からページを再開した場合など、バージョンが異なっても引き続き問題が発生します。バックグラウンドタスクは存続しません。

これらの統計もサーバー上で追跡しているとおっしゃいました。これは便利なので、最も明白なことは、ウィンドウフォーカスイベントを使用して、ラベルがフォーカスを取り戻したときを検出することです。次に、サーバーを呼び出して最新の統計を取得し、その新しいデータに基づいてタイマーをリセットします。リクエストの進行中に古いデータが表示されないようにするには、この間に読み込みスピナーまたはその他のものを表示することを選択できます。

これを修正するもう 1 つの一般的な方法は、タイマーが増加するたびに、データが最後に返されたときのタイムスタンプを表す変数を保持することです。フォーカスを失った場合は、blur イベントを使用して検出し、その最後のタイムスタンプをどこかに保存できます。その後、彼らがフォーカスを取り戻したときに、focus イベントを処理して、現在の時刻と、フォーカスを離れる (フォーカスを失う) 前に記録された最後に記録された時刻との差を計算できます。この期間から値を再計算できます。

しかし、サーバーがこの情報を持っている場合は、エラーが発生しにくくなり、いつフォーカスが戻ったかをサーバーに問い合わせるだけで済みます。