таймер обратного отчета

299

30 января 2018, 11:46

alert срабатывает когда число меньше 0, но когда он срабатывает, число больше, а после подтверждения или отмены его, число меняется на более меньшее. почему?
Почему alert срабатывает быстрее чем timeElem.innerHTML = "0:0:0:0";? Значение в timeElem.innerHTML такое как надо, на на странице не успевает обновиться раньше, чем запуститься сам alert.

P.S: во втором примере, я перед alert('Готово'); добавил timeElem.innerHTML = "0:0:0:0";, ибо проверки на миллисекунды нету, и в следствии число будет 0.999. Таймер не идеален, но суть сейчас не в этом.

var timeElem = document.getElementById('time'),  
		countdown = new Date(), 
		responseTime = new Date(Date.now() + (1000*10)); // таймер 10 секунд 
 
function startTime() { 
  countdown.setTime(responseTime - Date.now()); 
  timeElem.innerHTML = countdown.getUTCHours() + ':' + countdown.getUTCMinutes() + ':' + countdown.getUTCSeconds() + ':' + countdown.getUTCMilliseconds(); 
  if(countdown.getUTCHours() > 0 || countdown.getUTCMinutes() > 0 || countdown.getUTCSeconds() > 0) { 
    requestAnimationFrame(startTime); 
  } else { 
    alert('Готово'); 
  } 
} 
requestAnimationFrame(startTime);

<div id="time"></div>

var timeElem = document.getElementById('time'),  
		countdown = new Date(), 
		responseTime = new Date(Date.now() + (1000*10)); // таймер 10 секунд 
 
function startTime() { 
  countdown.setTime(responseTime - Date.now()); 
  timeElem.innerHTML = countdown.getUTCHours() + ':' + countdown.getUTCMinutes() + ':' + countdown.getUTCSeconds() + ':' + countdown.getUTCMilliseconds(); 
  if(countdown.getUTCHours() > 0 || countdown.getUTCMinutes() > 0 || countdown.getUTCSeconds() > 0) { 
    requestAnimationFrame(startTime); 
  } else { 
    timeElem.innerHTML = "0:0:0:0"; 
    alert('Готово'); 
  } 
} 
requestAnimationFrame(startTime);