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

下雪天的夏风

已于 2023-12-21 23:26:16 修改

阅读量1k

点赞数 29

分类专栏：问题解决文章标签：前端 js 计时器失效 setTimeout setInterval

于 2023-12-15 23:53:59 首次发布

本文链接：https://blog.csdn.net/qq_40147756/article/details/135026571

版权

问题解决专栏收录该内容

27 篇文章 0 订阅

订阅专栏

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") || (event.oldState == "frozen" && event.newState == "active")) {
       console.log("visibile");
    }
  });
</script>