定時器對浏覽器的影響?在項目開發中使用了js定時器,當切換浏覽器窗口後,會發現定時器執行出現異常,原因是浏覽器為了節約資源,會停止不是當前窗口下的定時器,反複切換就會出現異常,解決方法有兩種;,我來為大家講解一下關于定時器對浏覽器的影響?跟着小編一起來看一看吧!
在項目開發中使用了js定時器,當切換浏覽器窗口後,會發現定時器執行出現異常,原因是浏覽器為了節約資源,會停止不是當前窗口下的定時器,反複切換就會出現異常,解決方法有兩種;
第一種,使用window.onblur、window.onfocus來解決;
當浏覽器失去焦點後清除定時器,聚焦後重新開始定時器;
js代碼如下:
window.onblur = function () {
Document.title = "退出頁面";
}
window.onfocus = function () {
document.title = "進入頁面";
}
第二種,使用浏覽器頁面可見性 API visibilityChange事件解決;
當浏覽器最小化窗口或切換到另一個選項卡時就會觸發visibilityChange事件,我們可以在事件中用Document.hidden或者Document.visibilityState判斷當前窗口的狀态,來決定除定時器後者重新開始定時器;
js代碼如下:
document.addEventListener("visibilitychange", function() {
if (document.hidden === true) {
// 頁面被挂起
} else {
// 頁面由挂起被激活
}
});
推薦使用第二種方法,用這種方法我們可以在更多的業務場景中用到:
>1.網站有圖片輪播效果,隻有在用戶觀看輪播的時候,才會自動展示下一張幻燈片。
2.顯示信息儀表盤的應用程序不希望在頁面不可見時輪詢服務器進行更新。
3.頁面想要檢測是否正在渲染,以便可以準确的計算網頁浏覽量(埋點使用場景)。
4.當設備進入待機模式時,網站想要關閉設備聲音(用戶按下電源鍵關閉屏幕)。
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!