javascriptnode.jssettimeoutsetinterval

How can setTimeout run in order


I have two for loop, inside them I have setTimeout function like following code:

for(let i=0;i<3;i++){
    setTimeout(()=>{console.log(i)}, 1000)
}
for(let i=0;i<3;i++){
    setTimeout(()=>{console.log(i)}, 1000)
}

I want the second loop does not executed until after the first loop finished:

0
1
2
0
1
2

How i can do that?


Solution

  • I can't comment yet or I would ask clarifying questions so I'll give you what I think you're asking for. If you want a 1 second delay between each number being logged to the console then this will work:

    const func = async () => {
      for (let i = 0; i < 3; i++) {
        await new Promise((resolve) =>
          setTimeout(() => {
            console.log(i);
            resolve();
          }, 1000)
        );
      }
      for (let i = 0; i < 3; i++) {
        await new Promise((resolve) =>
          setTimeout(() => {
            console.log(i);
            resolve();
          }, 1000)
        );
      }
    };
    
    func();
    

    A quick rundown of what's happening here. I created an outer function named func which I made asynchronous so that I can use the await keyword within it. I then put the setTimeout call inside a new instance of Promise. The promise combined with the await means that javascript will essentially stop at that line until the Promise calls resolve. Once resolve is called that instance of Promise is finished and the await statement stops "blocking" javascript and the callbackque continues. TLDR:

    1. To use await you must be in an asynchronous function.
    2. If await is used in front of a Promise everything will stop until the promise resolves.
    3. Placing the resolve of the promise inside the callback given to setTimeout ensures that we will wait until each timeout finishes BEFORE the next timeout begins.