javascript - `document.getElementById` 是否破坏了该功能？

Question

所以我正在研究番茄计时器，但无法弄清楚我的 JS 做错了什么。该项目的概述在这里:http://codepen.io/Ohillio/pen/wMoNWy

但是我遇到问题的代码的具体部分是:

// global variables
var min = 0;
var sec = 0;


function tick() {
 alert("Counter Started");
 sec = 59;
 min--;
 document.getElementById("timer").innerHTML = min + ":" + sec;
 do {
  sec--
  document.getElementById("timer").innerHTML = min + ":" + sec;
  setTimeout(donothing,500);
} 
  while (sec != 0);
}

问题是，它似乎在第一次执行后就结束了该函数。我希望秒数减少到 0，但现在它的计算结果只是 58。

document.getElementById 是否会破坏该功能？

Answer 1

使用 setInterval 可能是您尝试执行的操作的更好解决方案。一旦你达到0，它就会更准确，更容易短路。另外，我更喜欢以秒为单位保留总时间，仅使用分钟来显示。我整理了一个示例供您查看。

<script>
  var interval;
  var totalSeconds = 1500;

  function tick() {
    totalSeconds--;
    min = Math.floor(totalSeconds / 60);
    sec = totalSeconds % 60;
    document.getElementById('timer').innerHTML = min + ':' + sec;
    if (0 >= totalSeconds) {
        clearInterval(interval);
    }
  }
  interval = setInterval(tick, 1000);
</script>

希望这有帮助，祝你好运!