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

您的代码存在的问题是：

递减变量
测试它是否为零，如果是，则从循环返回。
在所有其他情况下，您更新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)。在大多数情况下，您需要在调用timer-function之前创建标记，然后只更新该值。但也许你正在做一些动画，因此每个值需要单独的标签，所以这样做并不一定是错的。

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

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

2 个答案: