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

Aomine 发布于2019-08-23 12:38 / 2416人阅读

摘要：问题描述这个倒计时按钮，如果页面在移动端切到后台和切回来，倒计时停止运行。相关代码为了兼容，切换到后台继续运行

问题描述

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

海外云主机服务器托管 php返回继续执行非主线程的执行问题 java倒计时后执行兼容支持webrtc的移动端

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98867.html

马蜂窝 iOS App 启动治理：回归用户体验

摘要：马蜂窝旅游历经几十个版本的开发迭代，在启动流程上积累了一定的技术债务。我们定义启动广告曝光率启动广告曝光启动广告加载。增长、活跃、留存是移动 App 的常见核心指标，直接反映一款 App 甚至一个互联网公司运行的健康程度和发展动能。启动流程的体验决定了用户的第一印象，在一定程度上影响了用户活跃度和留存率。因此，确保启动流程的良好体验至关重要。「马蜂窝旅游」App 是马蜂窝为用户提供...

Jinkey 2019-08-26 18:27 评论0 收藏0
21世纪了还愚公移山？数据库这么迁移更稳定！

摘要：数据迁移，主要利用阿里云数据传输服务的数据迁移能力，涉及到全量迁移增量迁移一致性校验及反向任务。小结通过周密的迁移方案设计，以及强大的数据迁移工具的能力，闲鱼商品库顺利完成亿在线数据库服务迁移，独立的物理部署显著提升商品库在线服务的稳定性。背景在系统的快速迭代过程中，业务系统往往部署在同一个物理库，没有做核心数据和非核心数据的物理隔离。随着数据量的扩大这种情况会带来稳定性的风险，如...

ymyang 2019-06-25 19:08 评论0 收藏0