clearTimeout() 不清除定时器

Question

function countDown(secs,elem)
{   
    var element = document.getElementById(elem);
    element.innerHTML = "Game ends in " + secs + " seconds!";
    if(secs<1)
    {   
        clearTimeout(timer);
        document.getElementById('gameContent').style.display='none';

    }
    secs--;
    var timer = setTimeout('countDown('+secs+',"'+elem+'")',1000);

}

 <div class="timerCount" id="status"></div>
 <script>countDown(5,"status");</script>

我的计时器在 5 秒时正确启动并递减。我的游戏 div 在计时器达到 0 后隐藏，但计时器没有清除并结束，而是变为负值。请我的代码中的错误停止计时器并清除它

Answer 1

超时的清除没有任何意义，因为你在你想清除的超时调用的回调中，所以真的没有什么可清除的。即使您将 timer 声明为全局变量，这仍然无法解决该概念性问题。

你的问题确实是在秒运行结束后你仍然调用 setTimeout。所以，在这样做之前退出函数（或使用 else）：

function countDown(secs,elem)
{   
    var element = document.getElementById(elem);
    element.innerHTML = "Game ends in " + secs + " seconds!";
    if(secs<1)
    {   
        document.getElementById('gameContent').style.display='none';
        return; // <-------- add this!
    }
    secs--;
    // avoid passing string as first argument to setTimeout:
    setTimeout(countDown.bind(null, secs, elem),1000);
}

注意：将字符串作为第一个参数传递给 setTimeout 被认为是不好的做法：需要评估该字符串，就像 eval 一样。除了程序员对 eval 的保留外，在这种情况下它的效率也较低且没有必要。

Answer 2

如果您只使用 setInterval 并执行如下操作，效率会更高：

function countDown(secs, elem) {
  var interval;
  var element = document.getElementById(elem);
  var timer = setInterval(function() {
    secs--;
    update();
    if (secs < 1) {
      clearInterval(timer);
    }
  }, 1000);

  function update() {
    if (secs > 0) {
      element.innerHTML = "Game ends in " + secs + " seconds!";
    } else {
      document.getElementById('gameContent').style.display = 'none';
    }
  }
  update();

}

countDown(5, "status");

<div id="gameContent">
  <h1>Game</h1>
  <div class="timerCount" id="status"></div>
</div>

clearTimeout() 不清除定时器

clearTimeout() not clearing timer

html

javascript

css

cleartimeout