如何实现一个倒计时,切换浏览器 tab之后定时器不暂停,和 segmentfault 的倒计时验证一样?

作者站长头像
站长
· 阅读数 6

如何实现一个倒计时,切换浏览器 tab之后定时器不暂停,和 segmentfault  的倒计时验证一样?

回复
1个回答
avatar
test
2024-06-25

当浏览器最小化窗口或切换到另一个选项卡时就会触发visibilityChange事件,我们可以在事件中用document.hidden(true/false)或者document.visibilityState("visible"/"hidden")判断当前窗口的状态,来决定除定时器后者重新开始定时器

demo:

    let count = 0;
    let timer = null
    timer = setInterval(() => {
      console.log(count);
      count++
    }, 200)
    document.addEventListener("visibilitychange", function () {
      if (document.hidden === true) {// document.visibilityState == "visible"
        // 页面被挂起
        clearInterval(timer)
      } else {
        // 页面由挂起被激活
        timer = setInterval(() => {
          console.log(count);
          count++
        }, 200)
      }
    });

也可以这样:

https://juejin.cn/post/6985798073700057118
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容