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

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

问题描述及需求

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

思路

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

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

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() {});

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