移动端倒计时切到后台切回来不继续执行的问题

问题描述

这个倒计时按钮，如果页面在移动端切到后台和切回来，倒计时停止运行。
但是在pc端没有这个问题。
倒计时代码如下

 let downCount = () => {
                        if (this.count >= 1) {
                            this.count--;
                        } else {
                            clearInterval(timer);
                        }
                    };
timer = setInterval(downCount , 1000);

知识点

页面切到后台会触发 visibilitychange 事件，通过document监听器可以捕获这个事件
Document.visibilityState 可以获得当前状态

• visible : 页面内容至少是部分可见。 在实际中，这意味着页面是非最小化窗口的前景选项卡。
• hidden : 页面内容对用户不可见。 在实际中，这意味着文档可以是一个后台标签，或是最小化窗口的一部分，或是在操作系统锁屏激活的状态下。
• prerender : 页面内容正在被预渲染且对用户是不可见的(被document.hidden当做隐藏). 文档可能初始状态为 prerender，但绝不会从其它值转为该值。 注释：浏览器支持是可选的。

https://developer.mozilla.org...

解决思路

1. 倒计时开始启动，增加监听器，监听visibilitychange事件
2. 切换到后台，触发visibilitychange事件，记录开始时间
3. 切换到前台，触发visibilitychange事件，记录结束时间
4. 用结束时间 - 开始时间，当前值减去时间差就是切换到后台走的数值，然后继续运行倒计时。

相关代码

let downCount = () => {
                        if (this.count >= 1) {
                            this.count--;
                        } else {
                            clearInterval(timer);
                        }
                    };
document.addEventListener('visibilitychange',() => {
    if(document.visibilityState == 'hidden'){
        clearInterval(timer);//为了兼容pc，pc切换到后台继续运行
        start= new Date().getTime();
    } else  if( document.visibilityState == 'visible'){
        end = new Date().getTime();
        s2 =Math.floor( (end - start)/1000);
        this.count =  this.count - s2;
        timer = setInterval(downCount , 1000);
        document.removeEventListener('visibilitychange');
    }
})
timer = setInterval(downCount , 1000);