如何使用setInterval或setTimeout并在计数期间显示结果？

Question

我想让一个计时器在调用函数之前从5秒倒数到零，我已经成功地做到了这一点，但我还没有能够在倒数时显示计时器的值。而是在显示数值的地方，<div></div> 从空白变成了“Number: 0”。我使用了setTimeout和setInterval，但结果相同。

<script type="text/javascript">
    for (i = 5; i > 0; i--) {
        function countDown() {
            setInterval(function () {
                document.getElementById("displayDiv").innerHTML = "Number: " + i;
            }, 1000);
        }
    }
</script>

我也尝试使用.value代替.innerHTML，但没有帮助。

<input type="button" value="Count" onclick="countDown()" />

<div id="displayDiv" />

这似乎应该很简单，但我被难住了。任何帮助都将不胜感激。

- JonDoeCA

---

你的尝试失败是因为你没有调用函数，而只是执行了代码来创建一个命名函数表达式5次，并从未调用它。 - RobG

我简直不敢相信我没看到那个。谢谢你的解释！ - JonDoeCA

Answer 1

function countDown(i) {
    var int = setInterval(function () {
        document.getElementById("displayDiv").innerHTML = "Number: " + i;
        i-- || clearInterval(int);  //if i is 0, then stop the interval
    }, 1000);
}
countDown(5);

演示：http://jsfiddle.net/DerekL/sFtqZ/（包括额外的回调参数）

- Derek 朕會功夫

---

@RobG - 看起来更好了，已经修改。 - Derek 朕會功夫

谢谢你。看起来更整洁了，还感谢你提供的参考！ - JonDoeCA

我已经检查了你的代码的一部分，但有些地方我不太明白。 "i-- || clearInterval(int);" 这段代码是如何工作的？我知道它是一个 OR，但是它怎么知道要在零时停止呢？为什么不在3或-15时停止？这里的 if 或者等价物在哪里？看起来 clearInterval(int) 可以在任何时候都是有效的，所以我也不理解这个。你能否增加更多的选项，比如 i-- || (x==0) || clearInterval(int);？ - JonDoeCA

@JonDoeCA - 这被称为短路求值。a || b()的意思是如果a为false，则执行b()。在i-- || clearInterval(int)中，当i--为0（0为false）时，执行clearInterval(int)。最适合像我这样懒惰的人！ - Derek 朕會功夫

（我一年前在SO上问过这个问题：https://dev59.com/Mmw05IYBdhLWcg3w41sp ;)） - Derek 朕會功夫

Answer 2

尝试

<script type="text/javascript">
function countDown() {
var i = 5;
var myinterval = setInterval(function() {
    document.getElementById("displayDiv").innerHTML = "Number: " + i;

    if (i === 0) {
        clearInterval(myInterval);
        //call your function
    }
    else {
        i--;
       }
    }, 1000);
}​
</script>

http://jsfiddle.net/pjSKa/

- Brett Smith