为什么倒计时停留在“ 1”？

Question

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），但它不起作用。 还有其他方法吗？

Answer 1

您的代码存在的问题是您：

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

换句话说：如果计数器为零，则不更新div标签，因此最后显示的值为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) 。 在大多数情况下，您需要在调用计时器功能之前先创建标签，然后才更新值。 但是，也许您正在做一些动画，因此每个值都需要单独的标签，因此以这种方式进行操作并不一定是错误的。

Answer 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;
}