当手机屏幕锁定时，倒计时计时器停止计时

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);
});