关于解决移动端息屏后定时器不工作的问题

不管是Android还是iOS都存在息屏后，过了一段时间后定时器会停止工作，再次打开后才继续工作的问题，且息屏后多长时间定时器会停止工作不确定。
本回答只提供息屏后，定时器停止，而软件未被后台杀死的情况。

问题描述及需求

我们项目是一款运动型软件，定时器记录用户运动的时间，当用户进行跑步等有氧运动时，会进行息屏等操作。而定时器会在息屏一段时间后自动停止（可能是20秒可能是1分钟，也可能是5分钟），只有当再次打开时才会继续计时。

思路

通过监听 visibilitychange 事件，得知该页面是否为可见。

在息屏时，我们主动关闭定时器，并记录当前时间。
在用户打开手机进入页面时，记录当前时间，计算出息屏期间的时间。
再次打开定时器，并将计时器时间加上息屏期间的时间。

let _this = this;document.addEventListener("visibilitychange", function() {if (document.visibilityState == "hidden") {console.log("close");clearInterval(_this.timer); // 息屏时主动关闭定时器_this.closeTiming = Date.now(); // 息屏时 记录息屏时间点} else {console.log("open");// 获得息屏期间的时间， 并换算为秒 单位_this.closeScreenDuringTime = Math.floor((Date.now() - _this.closeTiming) / 1000); // 原定时器需要计算的时间，加上息屏期间的时间就是总时间_this.currentDuringTime =_this.currentDuringTime + _this.closeScreenDuringTime;_this.openTimer(); // 调用函数，再次打开定时器}});

其中 document.visibilityState 有两个值分别为 ‘hidden’ 和 ‘visible’ 。
如果存在兼容性问题，也可以监听其他几个事件试试。

document.addEventListener("webkitvisibilitychange", function() {});
document.addEventListener("mozvisibilitychange", function() {});
document.addEventListener("msvisibilitychange", function() {});

如有错误，欢迎指正，谢谢！
以上内容仅共参考，欢迎大家讨论。

关于解决移动端息屏后定时器不工作的问题相关推荐

android息屏休眠定时器心跳停止运行
分两种情况: 1.当手机连接usb电源时,息屏不会造成定时器暂停运行 2.当手机未连接usb电源时,息屏会造成定时器暂停运行,并在再次点亮屏幕时定时器重新开始工作测试: 1.service保活,在s ...
Ubuntu息屏后唤醒的花屏问题
问题描述:每次系统无操作自动息屏后,按任意建唤醒,屏幕花屏,如下图上述情景在登陆两个账户后互相切换时也会出现(不是文字界面登陆账户),切换后直接花屏,只能强制关机虽说问题不大,但感觉很不舒服,好像 ...
Ubuntu 息屏后无法唤醒
Ubuntu 息屏后无法唤醒一.问题描述昨日自己给笔记本PC外加内存条后,电脑息屏无法唤醒,网上参考例程得以解决: 参考连接二.具体操作 1.安装laptop-mode-tools工具包 ...
app息屏后ajax请求不执行_息屏时钟app下载-息屏时钟软件下载v1.0 安卓版
息屏时钟app是一款息屏后可以在手机上显示各种时间的app,软件中可以感受全新的主题桌面,美化手机屏幕,不需要唤醒手机也能查看时间,软件的功能众多,还可以设置不同的息屏画面,超多内容可以体验,快来试试 ...
手机息屏后停止_手机息屏还能这样玩？华为这几个隐藏小功能快学起来
阅读本文前,请您先点击上面的"蓝色字体",再点击"关注",这样您就可以继续免费收到文章了.每天都有分享,完全是免费订阅,请放心关注. 注:本文转载自网络,如有侵 ...
移动端页面制作字号大小设定问题,设计稿文字字号规范,解决移动端大小屏适配问题
移动端页面制作字号大小设定问题,设计稿文字字号规范,解决移动端大小屏适配问题参考文章: (1)移动端页面制作字号大小设定问题,设计稿文字字号规范,解决移动端大小屏适配问题 (2)https://ww ...
联想Thinkpad E15 息屏后无法唤醒
联想Thinkpad E15 息屏后无法唤醒联想Thinkpad E15 息屏后无法唤醒联想Thinkpad E15 息屏后无法唤醒最近公司配的电脑,E15 老是熄屏后无法唤醒,重新安装系 ...
Android 小知识记录-----息屏后亮屏并显示Activity在锁屏页面之上
息屏后亮屏并显示Activity在锁屏页面之上 1. 加权限 <uses-permission android:name="android.permission.WAKE_LOCK&q ...
js实现全屏与退出全屏，解决F11进入全屏后退出全屏API方法失效（chrome）
js实现全屏与退出全屏,解决F11进入全屏后退出全屏API方法失效(chrome) 解决的问题谷歌浏览器F11全屏后,在页面中编写的全屏按钮失效解决方法 //判断是否是全屏状态 var isFul ...

关于解决移动端息屏后定时器不工作的问题

问题描述及需求

思路

关于解决移动端息屏后定时器不工作的问题相关推荐

最新文章

热门文章