在對web項目部署提示用戶刷新功能優(yōu)化的時候，用到了 visibilitychange,這里就簡單的介紹下 visibilitychange 。

概念

visibilitychange事件是瀏覽器17年前后添加的一個事件，是指當(dāng)其選項卡的內(nèi)容變得可見或被隱藏時，會在文檔上觸發(fā) visibilitychange (能見度更改) 事件。

MDN 也有相關(guān)屬性介紹 ? MDN Web Docs visibilitychange_event

使用場景

當(dāng)瀏覽器的某個標(biāo)簽頁切換到后臺，或從后臺切換到前臺時，會在 docment 上觸發(fā) visibilityState 事件；現(xiàn)在主流的瀏覽器都支持該消息了，例如Chrome, Firefox等。出于兼容性原因（Safari 14 之前的版本不支持掛載在 window 上），要在 document 上監(jiān)聽 visibilityState 事件；

什么時候觸發(fā)呢？ 當(dāng)用戶導(dǎo)航到一個新的頁面，改變標(biāo)簽頁，關(guān)閉標(biāo)簽頁，最小化或者關(guān)閉瀏覽器；或者移動端從瀏覽器換到其他的app。

在做頁面游戲的時候、播放音視頻文件時、在線考試防止考生離開當(dāng)前頁面時、數(shù)據(jù)上報等場景都時常用到。

使用方法

可以利用 document.hidden 的值來進行判斷，值類型為 布爾，true 為隱藏，false 為激活。

基本使用方法如下：

document.addEventListener("visibilitychange", function(){}, false);

在項目中當(dāng)頁面離開的時候就關(guān)閉查詢版本是否更新的定時器，以節(jié)約性能，等頁面再次激活的時候再次設(shè)置定時器。這里只摘取主要邏輯進行說明。具體可以看 ? Vue項目部署后提示刷新版本

const delayTime = 30;
let popupFlag = false;
let interval = null;

document.addEventListener('visibilitychange', checkVisibility);

// 切換頁面事件
function checkVisibility() {
  if (popupFlag) return;
  if (document.hidden) {
    // 離開時
    clearInterval(interval);
    interval = null;
  } else {
    // 防止10秒之內(nèi)頻繁切換
    debounce(createInterval(checkVersion), 10000);
  }
}

// 檢查版本
function checkVersion() {
    //業(yè)務(wù)邏輯省略...
}

// 創(chuàng)建定時器
function createInterval(callback) {
  interval = setInterval(callback, delayTime * 1000);
}

function debounce(fn, delay) {
  //記錄上一次的延時器
  let timer = null;
  return function () {
    //清除上一次的演示器
    clearTimeout(timer);
    //重新設(shè)置新的延時器
    timer = setTimeout(() => {
      //修正this指向問題
      fn.apply(this);
    }, delay);
  };
}

注意

現(xiàn)在某些瀏覽器還保留了visibilitychange的前綴，
例如Chrome瀏覽器還保留著webkit前綴，
不過該事件已經(jīng)趨于穩(wěn)定，在Chrome 33及以后就去掉了前綴，
直接使用visibilitychange

注：（1）微信內(nèi)置的瀏覽器因為沒有標(biāo)簽，所以不會觸發(fā)該事件。
（2）手機端直接按Home鍵回到桌面，也不會觸發(fā)該事件。
（3）PC端瀏覽器失去焦點不會觸發(fā)該事件，但是最小化，或回到桌面會觸發(fā)。

到此這篇關(guān)于js使用visibilitychange處理頁面關(guān)閉事件的文章就介紹到這了,更多相關(guān)js visibilitychange頁面關(guān)閉內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論