For Loop in Javascript outputs value only from last iteration

Question

I have this Javascript code, which works as expected:

<div class="test"></div>

<script>
setTimeout(function(){$(".test").append("test1")},1000);
setTimeout(function(){$(".test").append("test2")},2000);
</script>
<script src="js/jquery.min.js"></script>

It shows "test1" first and then "test2" a second later, as such: "test1test2", which is what I want.

When I try to do this in a FOR loop, like this:

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

Then I get "test2" first and then "test2" a second later, as such: "test2test2", which is not what I want.

In fact, if l = 3, then I get "test3test3test3" instead of "test1test2test3". Does anybody know how to solve this problem?

I think because the timeout is longer then the speed it is going through i, so by the time it evaluates i it is already at 3 — Scott Selby
– Scott Selby, Commented Oct 25, 2012 at 21:51

Selvakumar Arumugam · Accepted Answer · 2012-10-25 21:52:02Z

5

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.

answered Oct 25, 2012 at 21:52

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

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

Comments

Esailija · Accepted Answer · 2012-10-25 21:50:47Z

3

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

answered Oct 25, 2012 at 21:50

Esailija

140k24 gold badges280 silver badges328 bronze badges

Comments

jahroy · Accepted Answer · 2012-10-25 22:01:59Z

2

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.

edited Oct 25, 2012 at 22:01

answered Oct 25, 2012 at 21:51

jahroy

22.8k10 gold badges62 silver badges111 bronze badges

Comments

elclanrs · Accepted Answer · 2012-10-25 22:14:14Z

0

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

Use $.each instead of for loop, that way you have access to i variable anywhere in that scope.
Use delay instead of setTimeout. For this to work you need to trigger a queue first: $(".test").show(0).delay(timeInterval).append("test" + i)

answered Oct 25, 2012 at 22:14

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Comments

Cᴏʀʏ · Accepted Answer · 2012-10-26 13:46:41Z

0

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

edited Oct 26, 2012 at 13:46

answered Oct 25, 2012 at 21:51

Cᴏʀʏ

108k20 gold badges169 silver badges200 bronze badges

1 Comment

Curt Over a year ago

Thanks Cory for your suggestion. You need to remove one of the close brackets from: timeInterval)); to timeInterval); and it works.

Collectives™ on Stack Overflow

For Loop in Javascript outputs value only from last iteration

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related