監測頁面顯示隱藏的API

很多時候我們都有這樣的需求，當頁面不顯示的時候去做一些操作或者禁止一些操作。Page Visibility API爲我們實現這個需求提供了方便。

該API依賴於document對象，有兩個屬性和一個事件，我們來依次看一下：

一、屬性

1. document.hidden

該屬性直接返回一個頁面是否隱藏的布爾值，因爲屬性名是hidden，所以返回true說明當前頁面不可見。相反，如果返回false說明頁面可見。

console.log(document.hidden); // true or false

2. document.visibilityState

該屬性和document.hidden實現的功能幾乎一樣，只是返回值不同而已，返回的是一個可見性狀態的字符串，visible或者hidden

console.log(document.visibilityState); // visible or hidden

事件

visibilitychange

通過給document綁定該事件可以監聽頁面可見性的變化，無論是你最小化了瀏覽器還是跳轉到了另外一個頁面，都會觸發。

下面結合上面的屬性，寫一個最簡單的場景實現：

document.addEventListener("visibilitychange", ()=>{
    if(document.visibilityState === "hidden"){
        console.log("hidden");
    }else if(document.visibilityState === "visible"){
        console.log("visible");
    }
});

當頁面可見性發生變化時，判斷當前可見性的狀態進行相應的處理。這段最簡單的代碼目前就可以滿足我們的需求了。

實現想不出還會有什麼其他複雜的場景了，歡迎各位大佬補充。