为什么倒计时卡在“1”？答案

【问题标题】：Why does the Countdown stuck at "1"?为什么倒计时卡在“1”？
【发布时间】：2015-06-02 11:39:42
【问题描述】：

var count=6
var counter=setInterval(timer, 1000);

function timer(){
count=count-1;
if (count === 0){
     requestAnimationFrame(repeat);
     clearInterval(counter);
     return;
}
var countdown = createEntity($('<div id="countd"><p id="countp"></p></div>'));
game.add(countdown);
document.getElementById("countp").innerHTML=count;
}

这是我的倒计时方法。我正在编写游戏。首先它显示一个倒计时......但为什么它停留在“1”？如果我正在播放，它仍然会在显示屏上保持“1”。

我的想法是，clearInterval(Counter)，但它不起作用。还有其他方法吗？

【问题讨论】：

首先减少变量，然后测试它是否为零。如果为零，则从循环中返回。如果它不为零，则更新 div 标签。换句话说：如果计数器为零，则不会更新 div-tag。
@some 发布该评论作为答案似乎是个好主意。
旁注：“count = count - 1;”可以缩短为更易读的：“count--;”此外，如果转换为 FOR 循环，代码可能更容易理解。
count = 0时如何删除
？
if (count === 0) {$('#coundid').remove();}

标签： javascript timer counter setinterval countdown

【解决方案1】：

您的代码的问题在于您：

递减变量
测试它是否为零，如果是则从循环中返回。
在所有其他情况下，您更新 div 标签。

换句话说：如果计数器为零，则不更新 div-tag，因此最后显示的值为 1

假设您描述的问题是您的代码的唯一问题，您可以将其更改为以下内容：

function timer() {
  var countdown = createEntity($('<div id="countd"><p id="countp"></p></div>'));
  game.add(countdown);
  count -= 1;
  document.getElementById("countp").innerHTML=count;
  if (count === 0) {
    requestAnimationFrame(repeat);
    clearInterval(counter);
  }
}

我基本上只是将 if 语句移到了字段更新之后。我还没有测试过代码，但是如果你知道要改变什么的话。

我很好奇你是否真的想在每次定时器调用时调用createEntity 和game.add(countdown)。在大多数情况下，您希望在调用计时器函数之前创建标签，然后更新值。但也许你正在做一些动画，因此每个值都需要单独的标签，所以这样做不一定是错误的。

【讨论】：

【解决方案2】：

如果这是一个仅显示的问题（我猜是这样），那么当计数为 0 时，应在从函数返回之前更新 HTML。如果计数器变为 0，则不是更新显示。

if (count === 0){
    //assuming repeat is a variable defined somewhere in the rest of your code
    requestAnimationFrame(repeat);
    document.getElementById("countp").innerHTML=count;
    clearInterval(counter);
    return;
}

【讨论】：

此代码不起作用，因为有一些异常，例如repeat 变量未定义
我假设在原始代码（未在问题中发布的代码）将定义重复（以及所有其他变量，如游戏等）。在答案中添加了相同的假设。