Javascript setTimeout parameter reversing from loop

Question

This loop is in a function and it counts down from 10, however if I alert the parameter passed using i in the setV function it actually counts up!

for (var i=10;i>0;i--){
setTimeout('setV('+i+',"Out")',100);
}


function setV(c,t){
alert(c);
}

If you're doing alert(i), it doesn't count up. It should give you 0 for every alert, because that's the value of i when the setTimeout callbacks run. — I Hate Lazy
– I Hate Lazy, Commented Nov 23, 2012 at 17:36
@user1689607 not really. The value is captured by string concatenation. — John Dvorak
– John Dvorak, Commented Nov 23, 2012 at 17:37
All of those fire right after each other, and in reverse order (10,9,8,7,6...). What's the problem? — user1726343
– user1726343, Commented Nov 23, 2012 at 17:37
@JanDvorak: OP is talking about alerting i. Unless I'm misunderstanding the point. — I Hate Lazy
– I Hate Lazy, Commented Nov 23, 2012 at 17:37
@user1689607 he alerts the first argument, which gets its value from i. — John Dvorak
– John Dvorak, Commented Nov 23, 2012 at 17:39

Denys Séguret · Accepted Answer · 2012-11-23 18:16:49Z

4

All the setV are programmed to execute at the same time (100ms after the instaneous loop execution), the order isn't determined (see the spec).

You probably wanted

for (var i=10;i>0;i--){
   setTimeout('setV('+i+',"Out")',100*(11-i));
}

edited Nov 23, 2012 at 18:16

answered Nov 23, 2012 at 17:37

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

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

20 Comments

Guesser Over a year ago

so I can't use a for loop to trigger the animation frames?

Denys Séguret Over a year ago

I edited : to have the same order you should use 100*(11-i) (or (10-i) to have it start immediately.

user1726343 Over a year ago

@user1209203 The reason it counts "the wrong way" is because a callback set for 100ms fires before one set for 200ms and so forth

I Hate Lazy Over a year ago

The order isn't determined? Even though the duration is the same, the order will be maintained... unless you can show a working demo that suggests otherwise,.

Rob W Over a year ago

@Asad That example is flawed, because the timeout values are not identical.

|

user1726343 · Accepted Answer · 2012-11-23 17:36:05Z

0

If you are describing the behavior with:

setTimeout('setV('+i+',"Out")',i*100);

the reason it counts up is because a callback set for 1s will execute earlier than one set for 2s, which will execute earlier than one set for 3s...

answered Nov 23, 2012 at 17:36

user1726343

Comments

Jeremy J Starcher · Accepted Answer · 2012-11-23 17:45:04Z

0

When all of the timeouts are set to run at the same time, there is no promise what order they will run this.

This is a much better way to write that loop:

  function initThis() {
    var idx = 0;
    function doOneIteration() {
      window.alert(idx);
      idx++;
      if (idx <= 10) {
        window.setTimeout(doOneIteration);
      }
    }
    doOneIteration(); // Start loop
  }  


  initThis();  // This makes it all happen

answered Nov 23, 2012 at 17:45

Jeremy J Starcher

24k6 gold badges56 silver badges75 bronze badges

Collectives™ on Stack Overflow

Javascript setTimeout parameter reversing from loop

3 Answers 3

20 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

20 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related