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.

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(); 

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.

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)