倒计时网站在选项卡隐藏时自动暂停和恢复

Question

所以，几天前我用 HTML、CSS 和 JS 创建了一个非常基本的倒计时网站。这是 Github 存储库 和 住在这里。

在详细讨论问题之前，让我先向您介绍一下倒计时网站的工作原理。基本上，默认情况下，倒计时设置为 5 分钟，您可以通过输入

s

关键字来启动计时器，计时器就会启动。您还可以手动设置分钟并按照所述启动计时器。

倒计时工作得很好，在隐藏选项卡之前没有任何问题。我实际上在 Chrome 浏览器上进行了多次测试，选项卡在屏幕上可见和隐藏。

第一测试阶段：（选项卡：可见）

无论您设置多少分钟，该选项卡在屏幕上可见。计时器按预期工作。

第二测试阶段：（选项卡：隐藏）

我以

n

分钟启动计时器，然后切换到另一个选项卡。如果计时器设置为小于 6 分钟，则计时器工作得很好。 现在，当计时器设置为

7

分钟或更长时，计时器会在后台自动暂停。仅当您启动计时器后不访问计数器选项卡时才会发生这种情况（浏览器有足够长的时间来暂停逻辑）。

---

我对这个问题的看法

我对这个问题的推理是浏览器自动暂停 JavaScript 功能（逻辑）以节省资源。问题是我该如何克服这个问题？

我试图在谷歌上找到答案，其中之一建议是在倒计时选项卡的

Auto Discardable

上禁用

chrome://discards/

。但这没有用。

所以，我想问题很明显，当选项卡不再可见时，我应该如何告诉 chrome 浏览器不要停止逻辑。

---

该问题的解决方法

暂时，我可以通过将倒计时打开到一个新窗口来使用倒计时，其中它的选项卡处于活动状态，并且为我的工作打开了一个在屏幕上可见的不同窗口。计时器工作得很好，没有任何问题。因此，在我的显示屏（屏幕）中，我的工作窗口处于活动状态且可见，并且其后面的倒计时窗口处于活动状态。

倒计时逻辑

function startCountdown() {
  // console.log(mins);
  // console.log(secs % 60);
  // ? when timer starts we need to show -1 min
  showMins(mins - 1);
  secs = secs - 1;
  // ? shows the seconds
  secsDisplay.textContent = secs % 60;
  // * store mins and secs to the cookie
  setCookie();
  // ? resets the timer if 0 seconds are left
  if (secs === 0) {
    clearInterval(countdown);
    timerTicking.pause();
    timesUp.play();
    resetTimer();
    // ? or min decreases by 1 if seconds is fully divisible by 60
  } else if (secs % 60 === 0) {
    mins = mins - 1;
    showMins(mins);
  }
}

Answer 1

不管怎样，我使用一个赛马网站，并且发布分钟计时器会定期停止。重新加载页面即可纠正该问题。大约30分钟前，我将该网站添加到Chrome的Performance Memory Saver例外中，它似乎已经纠正了它。