不管是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() {
});
如有错误,欢迎指正,谢谢!
以上内容仅共参考,欢迎大家讨论。