如何在瀏覽器失去焦點時,即時更新網頁上的JavaScript計數器?
P粉825079798
P粉825079798 2024-01-16 17:40:29
0
1
313

我正在使用HTML、CSS和JavaScript編寫一個瀏覽器遊戲,使用Perl編寫。健康和耐力保存在伺服器上,我使用JavaScript在目前頁面載入時向使用者顯示這些統計資料的即時更新計數。這個功能運作良好,但是如果使用者切換標籤或切換到其他應用程式並將瀏覽器留在背景運行,當您返回時看到的計數值無法正確跟上。所以當您切換回瀏覽器時,您的計數器可能顯示50/100的耐力,而實際上您的耐力是100/100。因此,當您在遊戲中執行某個操作(載入新頁面)時,伺服器會將計數器更新為真實的數值,因為JavaScript只是計時以向使用者在瀏覽器中顯示「即時」捲動視圖。

有沒有辦法確保即使頁面/標籤不活動或不在前台,JavaScript計數器仍然可以正常運作?除了完全重寫我的遊戲以在瀏覽器中向用戶顯示連續的即時伺服器推送內容之外?

假設您正在玩遊戲。您會看到您的健康和耐力正在恢復。您切換到另一個程式一分鐘,然後返回瀏覽器中的遊戲。您會注意到您離開期間健康和耐力沒有更新。但是當您在遊戲中執行某個操作時,該值將更新為應有的數值,因為它在伺服器上進行了內部追蹤。這就是我想要解決的問題。希望這樣說得清楚!

除了在網路上搜尋並最終找到這個網站上沒有一個真正「好」的答案之外,我還沒有嘗試過任何方法來解決這個問題,所以我決定提問。

P粉825079798
P粉825079798

全部回覆(1)
P粉514001887

連續的伺服器推送也不起作用。主事件循環中的任何東西,如計時器或在失去焦點時發生的事件,都會被瀏覽器減慢以節省資源。一些行動瀏覽器會完全停止它。

問題的答案是改變應用程式如何追蹤這些統計數據。

現在有些人會說要使用WebWorkers在單獨的執行緒中運行計時器,但這並不能解決所有問題。您仍然會遇到不同版本的問題,例如如果有人從睡眠中恢復您的網頁或類似情況。沒有後台任務能夠存活下來。

您提到您還在伺服器上追蹤這些統計資料。這很方便,因此您應該做的最明顯的事情是使用視窗焦點事件檢測標籤何時重新獲得焦點。然後,您將呼叫伺服器以取得最新的統計資料並根據該新資料重設計時器。為了在請求正在進行時防止顯示陳舊的數據,您可以選擇在此期間顯示載入旋轉器或其他內容。

修復此問題的另一種常見方法是在每次計時器增加時保留一個變量,該變量表示資料上次返回的時間戳。當您失去焦點時,您可以使用blur事件偵測到,並將該最後時間戳記儲存在某個地方。然後當它們重新獲得焦點時,您可以處理focus事件,並計算當前時間與離開焦點(失去焦點)之前記錄的最後時間之間的差異。您可以從此期間重新計算出應該是什麼值。

但是如果您的伺服器具有此信息,只需在重新獲得焦點時向伺服器詢問會更不容易出錯和簡單。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!