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,

I want this result:
0
1
2
0
1
2
- and between 2 numbers wait 1 second.

how i can do that?

CodePudding user response：

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.

CodePudding user response：

I think that you're trying to do sort of a counter

Try something like this:

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

Let me know if this solve your problem

CodePudding user response：

This will work

nxt (0, 0);//seed the stack
function nxt(num, itertn){
    if(num == 3){//want till 2
        if(itertn == 0){// first or 2nd iteration
            num =0;
            itertn  ;
        }else{
            return;//after 2nd stop
        }
    }
    console.log(num);//the work
    num  ;    
    setTimeout(nxt, 1000, num, itertn);//next after a second
}

But there are other ways to do this

CodePudding user response：

Try nested loop

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

CodePudding user response：

One solution is create promises, and with map and promise.all, you can group each loop of promises and execute them sequentially.

(async () => {
const second = (i) => new Promise(resolve => setTimeout(() => {
  console.log(i)
  resolve(i)
}, 1000))



const loop = () => Array(3).fill(0).map(async(item, index) => {
  return await second(index)
})

var startTime = performance.now()

await Promise.all(loop())
var endTime = performance.now()
console.log(endTime - startTime)
await Promise.all(loop())
endTime = performance.now()
console.log(endTime - startTime)
})()