Question

我一直试图让这个javascript倒计时工作并让它从3倒数到1，但是我无法弄清楚为什么它不会一直下降到0？

为什么它会在1处停止，如何让它完全倒计时？

<body>
<p>Time left: <span id="time">3</span> seconds.</p>
<p><a href="#" onclick="play()">Play</a> <a href="#" onclick="pause()">Pause</a></p>
<script>
var time = 3,
timeElement = document.getElementById('time'),
timer = null;
var updateTimer = function() {
  timeElement.innerHTML = time--;
  if (time === 0) {
    clearInterval(timer);
  }
}
function play() {
    timer = setInterval(updateTimer, 1000);
    return false;
}
function pause() {
    clearInterval(timer);
    return false;
}
</script>
</body>

你也可以测试我在这里制作的JsFiddle：http://jsfiddle.net/Vg4kQ/ 谢谢你的帮助！

Answer 1

使用前缀而不是后缀减少：

timeElement.innerHTML = --time;

这与前缀和后缀增量/减量运算符之间的语义差异有关。它们都按预期增加/减少变量的值，但在用作表达式时它们不会计算为相同的值。

前缀递增/递减功能与大多数人预期的方式相同：它们调整变量的值，然后评估为新值。

var x = 5;
console.log(++x); // 6
console.log(x);   // 6

Postfix运算符不太直观。它们仍然以相同的方式修改值，但是当用作表达式时，它们会在修改之前评估变量的值。

var x = 5; console.log(x++); // 5 console.log(x); // 6

在你的代码中，当time达到0时，后缀表达式仍然产生前一个值1，使得timeElement的值仍然显示为1，但仍然结束循环。将表达式转换为使用前缀减量修复了该问题。

或者，您可以随时将其拆分为两个语句。

time--; timeElement.innerHTML = time;

Javascript计时器停在1，而不是继续为0

1 个答案: