关于解决移动端息屏后定时器不工作的问题 |
您所在的位置：网站首页 › 怎么样设置oppo手机屏幕倒计时 › 关于解决移动端息屏后定时器不工作的问题 |
|
不管是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() {});如有错误，欢迎指正，谢谢！ 以上内容仅共参考，欢迎大家讨论。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |