SetTimeout javascript countdown Timer with delay

Question

hi i am confused with the below code

JSfiddle link

for (var i=6;i>=0;i--)
    {
       
        setTimeout((function(i)
              {
                  
            $("div").delay(4000).html(i);
            alert(i); //if commented unable to see the countdown
            
              })
            (i),4000);
        //alert(1);
        
    }

I am not able to get the count down timer.. whats wrong.. when "alert" is commented unable to see the count down numbers. Please somebody explain how the above code works.. Post some correct code

ITYM "can please somebody explain why the code above doesn't work"... — Alnitak
– Alnitak, Commented Apr 30, 2013 at 12:16

Alnitak · Accepted Answer · 2013-04-30 18:17:28Z

5

.delay() only works for jQuery animation methods, not general jQuery methods such as .html()
All of your timeouts are getting fired at once - there's nothing to space them out.

The net result is that (without an alert) every iteration through the loop runs immediately, leaving the div containing 0 having invisibly (and very briefly) contained the other numbers from the previous iterations.

Try this, instead:

function counter($el, n) {
    (function loop() {
       $el.html(n);
       if (n--) {
           setTimeout(loop, 1000);
       }
    })();
}

counter($('div'), 6);

See http://jsfiddle.net/alnitak/t3AA8/

edited Apr 30, 2013 at 18:17

answered Apr 30, 2013 at 12:19

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

NiRUS Over a year ago

yes i do agree with that.. delay is not my concern here.. but in my question above when i have alert it works fine.. when i comment it out it goes crazy.. how is the execution happening..

Alnitak Over a year ago

the alert is most likely just given the system time to process the timeout events. You should use console.log for debugging instead of alert.

NiRUS Over a year ago

ok i used console.log instead of alert.. i am getting all the numbers 6 to 0 in the log. But i am not able to see the same in the div tag using delay and timeout. Kindly check the code yourself on JSfiddle and explain how the things are getting fired.. thank you..

Alnitak Over a year ago

like I told you, .delay() doesn't work on most jQuery methods. You call that code from 6..0 and without the alert nothing stops it from immediately reaching the 0 iteration and overwriting the div with that value. Did you even try my code?

NiRUS Over a year ago

yes i tried it and used it in my program . thank you for that.. as per my knowledge javascript execution doesnt happen sequentially...

|

nbanic · Accepted Answer · 2014-04-14 14:24:20Z

0

Do not use alert, because alert will stop everything. Use console.log

edited Apr 14, 2014 at 14:24

nbanic

1,2801 gold badge9 silver badges12 bronze badges

answered Apr 30, 2013 at 13:24

user2195741

Collectives™ on Stack Overflow

SetTimeout javascript countdown Timer with delay

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related