Javascript - loop inside a loop

Question

I have the following code:

 for (i = 0; i < 3; i++){ //big loop
 console.log("Start of round" + i)
 for (s = 0; s < 5000; s++){ //small loop aka delay loop
 console.log("End of round" + i);
 }
 s = 0; //reset
}

Just to begin with - I know that there are other ways to solve this. Thing is, I am trying to learn further about loops so I picked this example, and please tell me where I am wrong.

so I have a loop that is supposed to run itself 3 times. and each time it runs itself, there is a loop that is supposed to delay the proceeding. Problem is, the delay stops happening at the 2nd and 3rd times.

Here is what I think that is supposed to happen

1) first i = 0, proceed with loop

2)Delay further proceeding with a loop inside

3)when delaying loop is over, reset the s var of the small loop, so it would run itself again when i = 1; and the bigger loop will start again

4) big loop starts again as i = 1; so proceed, run the delaying loop once again, because we have reset var s in the last time.

5) repeat when i = 2

What is it that I am missing here? I would like a deeper knowledge about javascript loops. thank you.

• epascarello: Looping does not create a delay... Your using the wrong technique if you want a noticeable delay in time.
• Marcos Pérez Gude: Nested loop don't produces a delay, only a lower performance
• user2844991: you don't need to reset s = 0, it will happen on each main iteration
• Jawwad Alam: For delay, you can use setTimeout, see related discussion here
• Jawwad Alam: Also console.log("End of round" + i); should probably be the last line in your outer loop

Answer 1

There is no real difference in delay, all your seeing is the console struggling to update really fast in a for loop.

for (i = 0; i < 3; i++){ //big loop
 console.log("Start of round" + i);
 console.time(i);
 for (s = 0; s < 5000; s++){ //small loop aka delay loop
 console.log("End of round" + i);
 }
 console.timeEnd(i);
}

When you log the processing time, you will see the numbers are pretty much the same.

If you remove the log line, you can see it more clearly the loops are the same +- a millisecond

for (i = 0; i < 3; i++){ //big loop
 console.log("Start of round" + i);
 console.time(i);
 for (s = 0; s < 5000; s++){ //small loop aka delay loop
 }
 console.timeEnd(i);
}

And the browsers will optimize code since you want faster code as a developer and user.

If you really want a delay you need to use setTimeout or setInteral

var count = 0;
function round () {
 console.log(count);
 count++;
 if(count<3) {
 window.setTimeout(round, 2000);
 }
}
round();

• RunningFromShia: Yes, I just realized this. that loop is flying too fast, all the console logs are over within a heartbeat.

Answer 2

First of all you don't need to use a loop as a delay instead you can use:

setTimeout(functionReference, timeOutMillis);

Second: You don't need to reset the s. When you enter the second loop it will be automatically set to 0.

• RunningFromShia: I already know about setTimeout - It was my 2nd try after trying the loop option. though - I am curious as of why the delay happend only once, and not in the next 2 times.
• Ivanov Mihai Cosmin: Because there is not a constant rate of processing the code.
• Nate: RE Second: Since var is not used, the variable is global. Hence the reset.

Answer 3

I supposed that you did this because in JavaScript, threads doesn't exists, your code actually works on my browser, tw you don't need that s=0; since the for statement do it for you.

for (i = 0; i < 3; i++){ //big loop
 console.log("Start of round" + i)
 for (s = 0; s < 5000; s++){ //small loop aka delay loop
 console.log("End of round" + i);
 }
}

Instead of using that delay you can use the setTimeout function:

setTimeout(function, timeInMilliseconds);

And put your logs into a function and run it, this is a way to use 'Threads' without being 'Threads'(since doesn't work the same as one)