-4

I have a for loop that is working, but when finished I want it to begin again and repeat this process ! 

for (var i = 0; i != 3; i = i + 1) {
    (function(index) {
        setTimeout(function() {
            document.getElementById(location[index]).style.background = color[index];            
        }, 1000 * index);
      })(i);
}
Marco Bonelli
  • 63,369
  • 21
  • 118
  • 128
coolbotic
  • 56
  • 2
  • 7

4 Answers4

1

You don't want to use any looping structure like for or while. Instead just make a function that gets invoked with the index to start it off, and then inside the callback, it increments the index and recursively invokes the same function. when the index gets to 3, set it back to 0 before the recursive call.

function cycle(index) {
    setTimeout(function() {
        document.getElementById(location[index]).style.background = color[index];

        index++; // Increment the index

        if (index >= 3) {
            index = 0; // Set it back to `0` when it reaches `3`
        }

        cycle(index); // recursively call `cycle()`

        //cycle(++index % 3);
    }, 1000);
}

cycle(0);

I used the % operator for a quick way to make sure it gets set back to 0 on the recursive call.

  • 1
    It would have had much more sense to use a `setInterval`. I don't think this kind of answer is worth to be made community wiki. – Marco Bonelli Dec 06 '15 at 01:45
  • @MarcoBonelli: I make all my answers community wiki. `setInterval` would work, but I wouldn't say *"much more sense"*. Just two different ways to do the same thing. –  Dec 06 '15 at 02:00
  • Thanks this is all working now would it be possible when say index is at 2 is breaks from the loop runs a function then carry's on with the loop? Thanks James – coolbotic Dec 06 '15 at 12:18
  • @coolbotic: why does it need to break the loop? can't you just run the function when `index === 2`? –  Dec 06 '15 at 12:21
  • Ah didn't think of that will try it now thanks! I would place this under cycle(0); correct? – coolbotic Dec 06 '15 at 12:25
  • @coolbotic: No, it should go inside the `setTimeout` callback. If you want it to run after the style has been set, then put it just before `cycle(++index % 3)` –  Dec 06 '15 at 12:31
  • @squint Sorry this is late but I'm confused why there is a % there and how that is calling 'cycle()'? Thanks if you can help – coolbotic Dec 08 '15 at 18:01
  • @coolbotic: The `%` is the modulus operator as mentioned in the last sentence. It simply returns the remained when dividing the left number by the right. So when `index` is `0`, it gives, `0`. When `1`, it gives `1`. When `2`, it gives `2`. When `3`, it gives `0`. When `4`, it gives `1`... and so on. So you get `0 1 2 0 1 2 0 1 2...` passed to `cycle()` as `index` increments. I'll update the answer with a version that is perhaps more clear. –  Dec 08 '15 at 20:54
0

you can use second for loop. in the second loop write how many times do you want to repeat first loop. Also you can use while loop.

Giga
  • 98
  • 1
  • 2
  • 11
-1

Embed the initial for loop in another for loop to make the loop repeat a certain number of time.

For example (where number is the number of times you wish your loop to repeat):

for (var i = 0; i < number; i++) {
  for (var i = 0; i != 3; i = i + 1) {
    (function(index) {
      setTimeout(function() {
        document.getElementById(location[index]).style.background = color[index];            
      }, 1000 * index);
    })(i); 
  }      
}
Ignatius_Gim
  • 582
  • 2
  • 5
  • 21
-1

You can just use while (true) { // code block to be executed }

mroowa
  • 1
  • 1