为什么倒计时停留在“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

如果它只是一个显示问题（我猜是这样），那么当计数为 0 时，应该先从函数 return 更新到 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;
}

Answer 2

您的代码存在问题是您：

减少变量
测试它是否为零，如果是，则从循环中 return。
在所有其他情况下，您更新 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)。在大多数情况下，您希望在调用计时器函数之前创建标签，并只更新值。但也许您正在制作一些动画，因此每个值都需要 individual 标签，所以这样做不一定是错误的。

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

Why does the Countdown stuck at "1"?

javascript

counter

timer

setinterval

countdown