在對(duì)web項(xiàng)目部署提示用戶(hù)刷新功能優(yōu)化的時(shí)候，用到了 visibilitychange,這里就簡(jiǎn)單的介紹下 visibilitychange 。

概念

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

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

使用場(chǎng)景

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

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

在做頁(yè)面游戲的時(shí)候、播放音視頻文件時(shí)、在線(xiàn)考試防止考生離開(kāi)當(dāng)前頁(yè)面時(shí)、數(shù)據(jù)上報(bào)等場(chǎng)景都時(shí)常用到。

使用方法

可以利用 document.hidden 的值來(lái)進(jìn)行判斷，值類(lèi)型為 布爾，true 為隱藏，false 為激活。

基本使用方法如下：

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

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

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

document.addEventListener('visibilitychange', checkVisibility);

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

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

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

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

注意

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

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

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

最新評(píng)論