Таймер обратного отсчета перестает тикать, когда экран телефона заблокирован - PullRequest
1 голос
/ 26 апреля 2020

Я написал код - таймер, который измеряет количество введенных секунд. В то время как таймер отсчитывает секунды, когда я блокирую экран телефона, после разблокировки экрана через долгое время таймер останавливался через несколько секунд после блокировки экрана. Есть ли способ исправить это?

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>

1 Ответ

2 голосов
/ 26 апреля 2020

вместо 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);
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...