For Loop in Javascript outputs value only from last iteration

Question

I have this Javascript code, which works as expected:

Answer 1

This is because you aren't capturing the value of i from the for-loop. You can tweak your code to this to make it work:

var timeInterval = 1000;
for (var i = 0, l = 2; i < l; i++ ) {
    (function(i2, timeInterval2) {
        setTimeout(function() {
            $(".test").append("test" + i2);
        }, timeInterval2);
    })(i, timeInterval);
    timeInterval += 1000;
}

Answer 2

The for loop doesn't create a new scope, you can use another function to do it:

var timeInterval = 1000;
for (var i = 0, l = 2; i < l; i++) {
    setTimeout((function(i) {
        return function() {
            $(".test").append("test" + i);
        }
    })(i), timeInterval);
    timeInterval += 1000;
}

Answer 3

The most obvious way to keep i in scope is solved in other answers, but since you're using jQuery you have other options.

1. Use $.each instead of for loop, that way you have access to i variable anywhere in that scope.

2. Use delay instead of setTimeout. For this to work you need to trigger a queue first: $(".test").show(0).delay(timeInterval).append("test" + i)

Answer 4

The var i is incremented to 2 when the setTimeout is executing the function and so it just prints the i value as 2 resulting in test2test2.

You should use a closure to use the instance of i which will print test1test.

DEMO: http://jsfiddle.net/mBBJn/1/

var timeInterval = 1000;
for (var i = 0, l = 2; i < l; i++) {
    (function(i) {
        setTimeout(function() {
            $(".test").append("test" + (i+1))
        }, timeInterval);
        timeInterval += 1000;
    })(i);
}

Edit: used function args.

Answer 5

The variable i will always refer to the current value of i (not the value of i when called) in this situation.

That's how scope works in JavaScript.

See the answer by @Esailija for a solution.