calling setTimeout with a for loop

Question

I've written a function that changes the css positioning of a div

I've been successfully using setTimeout to call the function at a specific interval

NOW what I'm trying to do is call the function on 28 different divs on the same page, each with its own speed.

my thinking was that I could do this with a for loop like so:

for (var x = 0; x < 28; x++)
   { setInterval(function(){changeDirection(divlist[x])}, divs[divlist[x]].speed);}

using the object 'divs' where the speed and id are stored

the only way I could get them all to move against the timer was to call setInterval 28 times like so...

setInterval(function(){changeDirection(divlist[1])}, divs[divlist[1]].speed);
setInterval(function(){changeDirection(divlist[2])}, divs[divlist[2]].speed);
setInterval(function(){changeDirection(divlist[3])}, divs[divlist[3]].speed);
setInterval(function(){changeDirection(divlist[4])}, divs[divlist[4]].speed);....etc

the for loop did NOT work...

does anyone have any idea why? and is there a way to call setInterval on many different functions with a loop like this

possible duplicate of [setTimeout in a for-loop and pass i as value](http://stackoverflow.com/questions/5226285/settimeout-in-a-for-loop-and-pass-i-as-value) — Bergi, Aug 29 '12 at 16:00

score 4 · Accepted Answer · answered Apr 04 '12 at 22:27

4

You need to "anchor" the value of your loop iterator, otherwise it keeps incrementing and all the intervals affect the 29th one, which doesn't exist.

for(var x=0; x<28; x++) {
    (function(x) {
        // code goes here
    })(x);
}

However, 28 timers on one page is a really bad idea. Consider rewriting your code so that you only have one interval that calculates the new positions based on the speed value.

answered Apr 04 '12 at 22:27

Niet the Dark Absol

320,036
81
464
592

great answer...thanks! I'm curious to know the reason why the timers are bad as it seems to work fine performance-wise – pepperdreamteam Apr 05 '12 at 17:13
Firefox lags horribly when I have just six timers running simultaneously. Or at least it did last I tested. – Niet the Dark Absol Apr 05 '12 at 17:31

score 1 · Answer 2 · answered Apr 04 '12 at 22:35

1

My approach to these self calling functions.

var i = -1;
(function cssPositioning() {
  i++;
  if ( i < 28 ) {
            changeDirection(divlist[i]);
    setInterval(cssPositioning, divs[divlist[i]].speed);
  }
})();

answered Apr 04 '12 at 22:35

mikevoermans

3,967
22
27

score 1 · Answer 3 · answered Apr 04 '12 at 22:55

1

Based on @Kolink's explanation, you can try

for (var x = 0; x < 28; x++){ 
   setInterval(function(){
     var local = x;  //anchor the variable  
     changeDirection(divlist[local])}, divs[divlist[local]].speed);
   });
}

Hope this helps.

answered Apr 04 '12 at 22:55

Wei Ma

3,125
6
44
72

calling setTimeout with a for loop

3 Answers3

Linked

Related