javascript - Using setTimeout and an integer in a for loop

Question

I have a button with id play.

I want a countdown on that button with this code. But for some reason I can't get this to work.

var timeoutTime = 500, seconds = 5;
var countdown = $("#play h4");
for(var i = seconds; i>0; i--)
{
    setTimeout(function() {
    countdown.text("" + i); },timeoutTime);
    timeoutTime += 1000;
}

I tried a lot of things, the best I could get was just a 1 instead of 5 4 3 2 1. With this code I get a 0 on the button.

What's the problem ?

Answer 1

Use this :

for(var i = seconds; i>0; i--) {
    (function(i){
      setTimeout(function() {
          countdown.text("" + i); }, timeoutTime);
    })(i);
    timeoutTime += 1000;
}

Your problem was that i changes and you were always calling with the last value of i, because the callback you pass to setTimeout is called after the loop finishes.

The classic solution is to use a closure to keep another variable (here with the same name i) having the desired value. It works because this is a different function for each iteration (the scope of a variable is either the global scope or the function where it is declared).