很多時候我們都有這樣的需求规惰，當(dāng)頁面不顯示的時候去做一些操作或者禁止一些操作。Page Visibility API為我們實現(xiàn)這個需求提供了方便。
該API依賴于document對象俏让，有兩個屬性和一個事件至扰，我們來依次看一下：
一鳍徽、屬性
1. document.hidden
該屬性直接返回一個頁面是否隱藏的布爾值，因為屬性名是hidden敢课，所以返回true說明當(dāng)前頁面不可見阶祭。相反，如果返回false說明頁面可見直秆。
console.log(document.hidden); // true or false
2. document.visibilityState
該屬性和document.hidden實現(xiàn)的功能幾乎一樣濒募，只是返回值不同而已，返回的是一個可見性狀態(tài)的字符串圾结，visible或者hidden
console.log(document.visibilityState); // visible or hidden
事件
visibilitychange
通過給document綁定該事件可以監(jiān)聽頁面可見性的變化瑰剃，無論是你最小化了瀏覽器還是跳轉(zhuǎn)到了另外一個頁面，都會觸發(fā)筝野。
下面結(jié)合上面的屬性晌姚，寫一個最簡單的場景實現(xiàn)：
document.addEventListener("visibilitychange", ()=>{
if(document.visibilityState === "hidden"){
console.log("hidden");
}else if(document.visibilityState === "visible"){
console.log("visible");
}
});
當(dāng)頁面可見性發(fā)生變化時，判斷當(dāng)前可見性的狀態(tài)進行相應(yīng)的處理歇竟。這段最簡單的代碼目前就可以滿足我們的需求了挥唠。
實現(xiàn)想不出還會有什么其他復(fù)雜的場景了，歡迎各位大佬補充焕议。
