从计时器失效到判断页面可见性

1，问题 - 计时器失效

问题复现：移动端必现，pc 端和浏览器版本有关（公司电脑必现，家里的没有复现）。

通过 setTimeout 或 setInterval 实现的倒计时，会在页面隐藏后，实测会延缓计时或经过15s 左右会停止计时，导致计时不准确！直到页面再次激活。

2，解决 - 页面可见性判断

可以通过判断页面可见性，计算出经过的隐藏时间来重置倒计时的时间点。

1，页面可见性

无论使用 pc 还是移动端，都会有当前页面被隐藏的情况：

切换 tab 页
浏览器最小化
切换到其他应用
点击链接跳转到其他页面

2，visibilitychange

MDN 参考

document.addEventListener("visibilitychange", () => {// 页面可见if (document.visibilityState === "visible") {console.log("visible");} else {console.log("hidden");}
});

举例：计算隐藏时间

<body><div id="box">100</div><script>const box = document.getElementById("box");// 初始时间let count = 100;const inerval = setInterval(() => {if (count <= 0) {box.innerHTML = "倒计时结束";clearInterval(inerval);document.removeEventListener("visibilitychange", visibilitychange);return;}box.innerHTML = count--;}, 1000);let startTime2Hidden = 0; // 页面隐藏瞬间的时间let count2Hidden = 0; // 记录页面隐藏瞬间的 count 值document.addEventListener("visibilitychange", visibilitychange);function visibilitychange() {if (document.visibilityState === "visible") {const minus = parseInt((new Date().getTime() - startTime2Hidden) / 1000);count = count2Hidden - minus; // 正确经过的时间} else {startTime2Hidden = new Date().getTime();count2Hidden = count;}}</script>

visibilitychange 的问题：在 safari 浏览器下，这个事件不总是触发，比较怪异。

3，终极解决方案 - lifecycle

谷歌实验室开源项目，兼容性很好。

使用举例：

<script src="./lifecycle.es5.js"></script>
<script>lifecycle.addEventListener("statechange", function (event) {console.log(event.oldState, event.newState);if (event.oldState == "passive" && event.newState == "hidden") {console.log("hidden");} else if (event.oldState == "hidden" && event.newState == "passive") {console.log("visibile");}});
</script>