For loop and setTimeout

JavaScript
#1

hello
i’m trying to make a contdown timer using for loop and setTimeout but the code waits for a second and then run the whole loop all at once even though it’s inside the loop and i don’t understand why it’s doing that.
i tried with and without the immediately invoked function but the result was the same.
here’s my code:

start.onclick = () => {
    state.play = !state.play;
    const minutes = parseInt(state.counter[0] + state.counter[1])
    console.log(minutes)
    if (state.play) {
        for(let i = minutes ; i > 0 ; i--){
            for(let x = 59 ; x > 0 ; x--){
                (()=>{
                    setTimeout(() => {
                        state.counter = `${state.counter[0]}${state.counter[1]}:${x > 9 ? toString(x)[0] : 0}${toString(x).length == 2 ? toString(x)[1] : x}`
                        time.innerText = state.counter;
                        console.log(state.counter)
                    },1000)
                    time.innerText = state.counter;
                })()
                
                
            }
            (() => {
                setTimeout(() => {
                    state.counter = `${toString(i).length == 2 ? toString(i)[0] : 0 }${toString(i).length == 2 ? toString(i)[1] : i}:${state.counter[3]}${state.counter[4]}`
                    time.innerText = state.counter;
                },6000)
                time.innerText = state.counter;
            console.log(state.counter)
            })()
            
            
        }
    }
}

this is the full code on codepen :
https://codepen.io/3xo13/pen/abYvOQm

#2

Would you mind posting your full code to allow us to test your app out?

#3

yes sure ,alredy updated the post

#4

Let’s simplify this a little:

for (let i = 1; i <= 20; i++) {
   setTimeout(() => console.log('i =', i), 1000)
}

This isn’t telling to the code to space those logs out by a second. It is running the first iteration to log after one second, then (not waiting) telling the next iteration to log out after one second, then the next, then the next. It does all 20 in less than a millisecond.

Look at it this way. Let’s say you were in a room with 20 friends. You walk up to the first and say, “Come to my house for dinner in three days.” Then you walk up to the next and tell him, “Come to my house for dinner in three days.” You do that for all 20 people. Do you expect them to come on sequential weeks? Or would you expect them to all come at the same time?

You code is loading those up as fast as it can, telling to do those things in 1000 ms. But 1000 ms from when it was told to do it, not from when the last one ran.

To get the effect you want, you either need:

  1. to spawn the next setTimeout at the end of the previous one,
  2. to do some math so the delays are correct, or…
  3. to consider using something like setInterval.

There are other ways to do it, but they all kind of boil down to these.

#5

after what you told me here ,i realized that i don’t understand setTimeout properties like i thought i was ,i’m reading about it to find a new way ,thanks for your help