关于移动端浏览器定时器后台停止运行的问题

关于移动端浏览器定时器后台停止运行的问题

今天在做微信浏览器端的商城项目的时候遇到了一个问题，具体场景是这样的：在页面添加了一个定时器，某项数据每秒递减，当手机锁屏或者后台运行时再返回页面，发现定时器在后台运行时停止了，返回才继续开始运行。

解决方法：
这里我是用的是一个H5的一个PageVisibility API，在这里，我们可以得到两个属性及其参数，用来表示当前页面是否可见：

• document.visibilityState：hidden/visiable/preview
• document.hidden：true/false

对于我的问题，我是这样解决的

document.addEventListener('visibilitychange',function() {
    if(document.visibilityState=='visible') {
        location.reload(true);
    }
})
document.addEventListener('webkitvisibilitychange',function() {
    if(document.webkitVisibilityState=='visible') {
        location.reload(true);
    }
})
document.addEventListener('mozvisibilitychange',function() {
    if(document.mozVisibilityState=='visible') {
        location.reload(true);
    }
})
document.addEventListener('msvisibilitychange',function() {
    if(document.msVisibilityState=='visible') {
        location.reload(true);
    }
})

以上虽然是兼容写法，但这种新特性不太适合旧版本的浏览器，对于移动端可以放心使用，安卓/iOS测试通过。
意思是，通过visibilitychange事件监听当前页面可见性的变化，当前页面可见时，页面刷新，我就可以从后台拿到最新数据，当然，如果不想从后台拿数据，你可以这么办：

document.addEventListener('visibilitychange',function() {
        var d = new Date();
        var b = 0;
        if(document.visibilityState=='hidden') {
            b = Math.floor(d.getTime()/1000);
        }else {
            screenCloseTime = Math.floor((d.getTime() - b)/1000);
        }
    })

这样你就拿到了页面关闭了的时间，然后在页面打开时补上页面时间差。
需要注意的是安卓和iOS的情况可能不一样，需要分设备对待。

说到这个新特性，我们可以很容易的想到他的应用场景，比如：你想控制页面的动画在页面隐藏时暂停，返回时继续；也可以在页面不显示的时候，暂缓一些不必要的操作，可以达到减少客户端、服务端压力的目的等。总之，这个特性在某些场景下还是非常实用的。