手机屏幕锁定时倒计时停止计时

Question

我编写了一个代码 - 一个测量输入秒数的计时器。当我锁定手机屏幕时，计时器会倒计时，在长时间解锁屏幕后，计时器会在锁定屏幕后停止几秒钟。有没有办法解决这个问题？

document.getElementById('btn').addEventListener('click',function(){
  var workSeconds = parseInt(document.getElementById('work-seconds').value);
  var workSecondsCount = workSeconds;
  var worktimer = setInterval(workSecCount,1000);
  function workSecCount(){
    workSecondsCount--;
    workSecondsCount < 10 ? document.getElementById('workSecs').textContent = "0" + workSecondsCount : document.getElementById('workSecs').textContent = workSecondsCount;
    if(workSecondsCount == 0){
      document.getElementById('workSecs').textContent = "DONE";
      workSecondsCount = workSeconds;
      clearInterval(worktimer);
    }
  };
});

<input type="number" id="work-seconds" placeholder="seconds" min="0">
<button id="btn">START</button>
<p>Work Timer : <span id="workSecs"></span></p>

Answer 1

你需要依赖当前时间而不是workSecondsCount，然后你可以补偿时间差距。

var worktimer = 0;
document.getElementById('btn').addEventListener('click',function(){
  if (!worktimer) clearInterval(worktimer);
  var workSeconds = parseInt(document.getElementById('work-seconds').value);
  var workSecondsCount = new Date().getTime() + workSeconds * 1000;
  function workSecCount(){
    const secondsCount = Math.ceil((workSecondsCount  - new Date().getTime()) / 1000);
    secondsCount < 10 ? document.getElementById('workSecs').textContent = "0" + secondsCount : document.getElementById('workSecs').textContent = secondsCount;
    if(secondsCount <= 0){
      document.getElementById('workSecs').textContent = "DONE";
      if (worktimer) {
        clearInterval(worktimer);
        worktimer = 0;
      }
    }
  };
  workSecCount();
  worktimer = setInterval(workSecCount,1000);
});