repeating for loop in javascript

Question

I want to count from 0 to 199 three times in a row in 10 millisecond steps like 0 1 2 ... 198 199 0 1 2 .... 198 199 0 1 2 .... The first run is working fine with:

function count() {
 time = 0;
 for (var i = 0; i < 200; i++) {
 time += 10;
 setTimeout(function(j) {
 return function() {
 console.log(j);
 }
 }(i), time);
 };
};
count();

but i do not get the desired result when calling the function three times like

for (var i = 0; i < 3; i++) {
 count();
}

What is the right way for me?

• ThreeFx: Should animateRio(); be count();?
• Rafik Bari: what animateRio() refers to ?
• DasBeasto: I cant find the thread that describes this correctly but I believe its because the settimeout in your count() is non-blocking so the for-loop will continue to run without the time delay.

Answer 1

I suppose that should be timed too:

for (var i = 0; i < 3; i++) {
 setTimeout(animateRio /*or do you mean count?*/, i*2000);
}

• Berlin_J: i mean "count". Sorry! I will try the nested timeout.
• Berlin_J: it is not working. the console gives each number from 0 to 199 three times at the same time
• Berlin_J: now it is working fine. i used "count()" instead of just "count". Thank you very much!

Answer 2

You don't need to schedule all of your own timeouts, setInterval can call a function every unit of time. So create an interval that will run every 10 milliseconds. Then add a loop counter and use some modulo arithmetic.

var time = -1, 
 interval, 
 loop = 3; 
interval = setInterval(function() {
 time += 1;
 if(time % 200 === 0) {
 loop--;
 }
 if(loop < 0){
 clearInterval(interval);
 return;
 } 
 console.log(time % 200);
}, 10);

JSFiddle