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

如果您只使用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>

Answer 2

清除超时是没有意义的，因为你处于要清除的超时调用的回调中，所以没有什么可以清除的。即使您将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的保留之外，在这种情况下，它的效率也是不太高的。

clearTimeout（）不清除计时器

2 个答案: