JavaScript计时器未正确结束

Question

正在寻找关于为什么我的JavaScript计时器无法正常运行的一些见解。实际上，它工作得很好，除了它在剩下的1秒处停止并显示警报。当您单击确定按钮时，它会倒数到最后一秒（0）并再次显示警报。我无法弄清楚如何停止在左1秒而不是仅在零秒时发生的警报...

我将代码更改为在6秒而不是整整10分钟的时间内运行

function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10);
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;

    if (--timer < 0) {
      alert('Time has exceeded');
      location.href = "http://nova.umuc.edu/~ct388a13/";
    }
  }, 1000);
}

window.onload = function() {
  var tenMinutes = 60 * .1,
    display = document.querySelector('#time');
  startTimer(tenMinutes, display);
}

<section>
  <p id="transactionTimer">Act fast! This transaction must be completed in <span id="time">10:00</span> minutes</p>
</section>

Answer 1

这是因为向用户显示了JS更新以执行DOM更新。这与JS事件循环有关，可以通过使用setTimeout来避免，该setTimeout的超时时间非常短，即1ms。有关工作示例，请参见下面的代码段

function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
  setInterval(function() {
    --timer
    minutes = parseInt(timer / 60, 10);
    seconds = parseInt(timer % 60, 10);
   
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;
    if (timer === 0) {
      setTimeout(function(){
          alert('Time has exceeded');
          location.href = "http://nova.umuc.edu/~ct388a13/";
      }, 1);
    }
  }, 1000);
}

window.onload = function() {
  var tenMinutes = 60 * .1,
    display = document.querySelector('#time');
  startTimer(tenMinutes, display);
}

<section>
  <p id="transactionTimer">Act fast! This transaction must be completed in <span id="time">10:00</span> minutes</p>
</section>