监测页面显示隐藏的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");
    }
});

当页面可见性发生变化时，判断当前可见性的状态进行相应的处理。这段最简单的代码目前就可以满足我们的需求了。

实现想不出还会有什么其他复杂的场景了，欢迎各位大佬补充。