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

最新推荐文章于 2024-04-09 11:08:53 发布

转载最新推荐文章于 2024-04-09 11:08:53 发布

· 2.1k 阅读

2 ·

版权

原文链接：https://segmentfault.com/a/1190000016866610

文章标签：

#javascript #操作系统 #前端 #ViewUI

本文探讨了在移动端切换到后台时倒计时暂停的问题，提供了详细的解决方案，包括使用visibilitychange事件来同步倒计时进度，确保在不同设备上的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

这个倒计时按钮，如果页面在移动端切到后台和切回来，倒计时停止运行。
但是在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...

解决思路

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

相关代码

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);