Page Visibility API

我们先来看一个情况：我们生成一个定时器，给它10ms运行一次打印n然后n++，当n > 200时关闭定时器。

js 复制代码

function counter() {
    let n = 0;
    const timer = setInterval(() => {
        console.log(n);
        n++;
        if (n > 200) {
            clearInterval(timer);
        }
    }, 10);
}
counter();

可以看到效果也是很显而易见的，但是当我们在这个时候切换到别的页面的时候，定时器还会正常运行吗？我们来看一下。

会发现当我们切换到别的页面的时候这个定时器是1s运行一次的，这是因为浏览器对效率有优化，浏览器认为这个页面已经看不到了，那些复杂耗时计时操作就优化了一下，最快1s运行一次，这就会导致某些功能会异常。那我们该怎么办呢。

这时候就可以使用到一个API叫做Page Visibility API页面可见度API，这套API包含了一个事件和一个属性，我们来用一下。

事件我们去监听document，事件的名字叫做visibilitychange，当这个页面可见度发生变化的时候它就会运行这个事件。

js 复制代码

// 页面可见度API
document.addEventListener('visibilitychange', function () {
    console.log('页面可见度发生变化');
});

可以看到当我们切换到别的页面或者切换回来的时候这个事件都会调用一次，那我们怎么知道当前页面是显示还是隐藏的呢，我们可以通过一个属性document.hidden来知道，这是一个布尔属性，它为true的时候就表示当前页面是隐藏的，它为false的时候就表示当前页面是显示的。

js 复制代码

// 页面可见度API
document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
        console.log('页面不可见了');
    } else {
        console.log('页面可见了');
    }
});

通过这个API就可以很好的去在切换页面的时候进行一些事件的触发，比如视频的播放或者小游戏的暂停等等。

考虑到一些兼容性的问题我们最好做一些判断，因为在老版本里面事件的名称和属性的名称有一些不一样，在IE浏览器里面事件的名称叫做msvisibilitychange，属性的名称叫做msHidden；在谷歌的老版本浏览器里面时间的名称叫做webkitvisibilitychange，属性的名称叫做webkitHidden。

所以我们要处理这个事情也非常方便，定义两个变量，一个表示属性名hidden，一个表示事件名visibilitychange，如果document.hidden有值就说明浏览器支持visibilitychange事件，那么hidden变量的值就为hidden，visibilitychange变量的值就为visibilitychange，以此类推。

js 复制代码

let hidden, visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support  
    hidden = "hidden";
    visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {  // IE 9 and later support
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") { // Chrome 13 and later support
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
}
document.addEventListener(visibilityChange, function () {
    if (document[hidden]) {
        console.log('页面不可见了');
    } else {
        console.log('页面可见了');
    }
});