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

Why does the Countdown stuck at "1"?

本文关键字：停留在 倒计时 为什么      更新时间：2023-09-26
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)但它不起作用。还有其他方法吗?

你的代码的问题是:

  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)。在大多数情况下，您希望在调用timer函数之前创建标记，并只更新值。但也许你正在做一些动画，因此需要为每个值单独标记，所以这样做不一定是错误的。

如果这是一个仅显示的问题(我猜它是)，那么当计数为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;
}
相关文章：