How can I use setInterval or setTimeout and display the results during the count?

Question

I'm trying to make a timer count down from 5 seconds to zero before a function is called, and I can do that successfully, but I haven't yet been able to display the timer value as it counts down. Instead of displaying the values, the <div></div> goes from a blank space to "Number: 0". I've used both setTimeout and setInterval with the same result.

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

I also tried using .value in place of .innerHTML with no help.

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

<div id="displayDiv" />

This seems like it should be really simple, but it has me stumped. Any help is appreciated

Your attempt is failing because you aren't calling the function, you are just executing the code to create a named function expression 5 times and never calling it. — RobG, Jun 18 '12 at 01:08
I can't believe I didn't see that. Thanks for the explanation! — JonDoeCA, Jun 18 '12 at 01:24

Derek 朕會功夫 · Accepted Answer · 2012-06-18T01:22:40.983

16

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

DEMO: http://jsfiddle.net/DerekL/sFtqZ/ (extra callback argument included)

edited Jun 18 '12 at 01:22

answered Jun 18 '12 at 00:55

Derek 朕會功夫

92,235
44
185
247

@RobG - Seems better, changed. – Derek 朕會功夫 Jun 18 '12 at 01:22
Thanks for that. It looks cleaner and thanks for the reference too! – JonDoeCA Jun 18 '12 at 01:26
Thanks. If you think my answer did helped you out, you can pressed that green checkmark to accept this answer. ;) – Derek 朕會功夫 Jun 18 '12 at 01:30
I've gone over a part of your code that doesn't make sense to me. How does... "`i-- || clearInterval(int);`" work? I get (or assume) that it's an `OR`, but how does it know to stop at zero? Why not stop at 3 or -15? Where's the `if` or it's equivalent? It looks like clearInterval(int) could be valid at any time so I don't understand that either. Could you have more options there like `i-- || (x==0) || clearInterval(int);`? – JonDoeCA Jun 18 '12 at 02:56
1

@JonDoeCA - It is called [Short-circuit evaluation](http://en.wikipedia.org/wiki/Short-circuit_evaluation). `a || b()` simply means `if a is false, then do b()`. In `i-- || clearInterval(int)`, when `i--` is `0 (0 is false)`, then do `clearInterval(int)`. Best use for lazy people like me! – Derek 朕會功夫 Jun 18 '12 at 03:00
That's very cool! My mind is a bit numb from analyzing it, there's a lot going on in that little statement. Thanks so much for that! – JonDoeCA Jun 18 '12 at 03:14
1

(I asked this question 1 year ago on SO: http://stackoverflow.com/questions/6970346/what-is-x-foo `;)`) – Derek 朕會功夫 Jun 18 '12 at 03:21

Brett Smith · Answer 2 · 2012-06-18T01:01:02.513

4

try

<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/

edited Jun 18 '12 at 01:01

answered Jun 18 '12 at 00:54

Brett Smith

2,992
1
20
22

How can I use setInterval or setTimeout and display the results during the count?

2 Answers2

Linked