javascript 一段时间后没有更新计时器

Question

我测试了一个简单的计时器代码，用于在网站中显示计时器。当我在页面上时，计时器工作正常。但是，当我转到另一个页面或站点时，过了一会儿，当我回到计时器页面时，我发现计时器在间隔内无法正常工作。
假设我离开页面 5 分钟。所以当我回来时，我应该会看到

00:05:00

。但它显示

00:01:00

（周围）。 但如果我不离开页面，它就可以正常工作。
解决办法是什么？

timerElement = document.getElementById("time");
let seconds = 0, minutes = 0,  hours = 0;
timerInterval = setInterval(function() {
  seconds++;

  if (seconds === 60) {
    seconds = 0;
    minutes++;

    if (minutes === 60) {
      minutes = 0;
      hours++;
    }
  }

  const formattedTime = `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
  timerElement.textContent = formattedTime;
}, 1000);

<h1 id="time"></h1>

即使我将其部署在 github 页面上。但结果是一样的。

Answer 1

这个将在重新激活窗口上完成实际经过时间的工作，在系统待机时不会出现错误

const
  timerElement = document.querySelector('#timer-element')
, Digits2      = t => t<10 ? `0${t}` : t
, showTime     = (h,m,s) => timerElement.textContent = `${Digits2(h)}:${Digits2(m)}:${Digits2(s)}`
, one_Sec   = 1000
, one_Min   = one_Sec * 60
, one_Hour  = one_Min * 60
, ZeroTime  = new Date().getTime()
  ;
setInterval(()=>
  {
  let tim = new Date().getTime() - ZeroTime
    , h   = Math.floor( tim  / one_Hour )
    , m   = Math.floor((tim % one_Hour) / one_Min )
    , s   = Math.floor((tim % one_Min ) / one_Sec )
    ;
  showTime(h,m,s);
  },500);

<h1 id="timer-element"></h1>

如果你更详细一点：看那里