javascript - 在 JavaScript 中使用 window.setInterval 方法的基于 Web 的计时器应用程序在移动浏览器(Chrome、Firefox 等)上无法正常工作

Question

在 JavaScript 中使用 window.setInterval 方法的基于 Web 的计时器应用程序在移动浏览器中无法正常工作。这背后的原因是，在一定时间后，由于用户不活动，显示屏会熄灭，并且应用程序会移至后台以节省电量。因此window.setInterval不会周期性触发，整个计算就折腾了。

但是，我注意到尽管有这些限制，某些基于 Web 的计时器在移动浏览器中仍能正常工作。例如。 Google Timer .尽管存在上述限制，Google Timer 即使在离线 模式下也能正常工作。这些应用程序使用了哪些技术，因此它们也可以在移动浏览器上运行。

Answer 1

您需要在计算中使用系统时间。这样，当您的页面再次出现时，它会根据当前时间显示状态，而不是依赖过去的步骤。

btn.addEventListener('click', () => {
  btn.disabled = true;

  const start = new Date().getTime();
  const end = input.value * 60 * 1000 + start;

  let timer = setInterval(update, 1000);

  update();

  function update() {
    const current = new Date().getTime();
    let remaining = (end - current) / 1000;
    
    if (remaining <= 0) {
      clearInterval(timer);
      btn.disabled = false;
      output.textContent = 'Done!'
    } else {
      output.textContent = `${Math.floor(remaining / 60)}m ${Math.floor(remaining%60)}s`;
    }
  }
  
});

<button id="btn">Countdown</button>
<input id="input" type="number" value="2" min=1 max=59 size=5 />mins
<p id="output">0m 0s</p>