With this code i want to create a loop that will work in decreasing way. I want to use for loop going from 10 till 1. I did this, but i have an error. The error is next: after pushing on the button the last values have a delay.

Probably this is happening because the last indexes are higher at the end, and when the app divide 1000 / 2, the timeout is higher. Am i right? and how to solve the issue?

const btn = document.getElementById('btn');
btn.addEventListener('click', function(){
  
    for (let index = 10; index > 0; index--) {
        setTimeout(() => {
            console.log(index)
        },  1000 / index);      
    }
})

<div class="app">
  <button id="btn">click</button>
</div>

With this code i want to create a loop that will work in decreasing way. I want to use for loop going from 10 till 1. I did this, but i have an error. The error is next: after pushing on the button the last values have a delay.

Probably this is happening because the last indexes are higher at the end, and when the app divide 1000 / 2, the timeout is higher. Am i right? and how to solve the issue?

const btn = document.getElementById('btn');
btn.addEventListener('click', function(){
  
    for (let index = 10; index > 0; index--) {
        setTimeout(() => {
            console.log(index)
        },  1000 / index);      
    }
})

<div class="app">
  <button id="btn">click</button>
</div>

• javascript

Share Improve this question Follow edited Jan 15, 2020 at 20:31 gillharman 9355 bronze badges asked Jan 15, 2020 at 18:40 AskingAsking 4,2402121 gold badges8282 silver badges164164 bronze badges 7

• 2 I'm not quite sure what you're asking, it seems to be working as expected for me. 1 goes off after 1000/1=1000 milliseconds, 2 goes off after 1000/2=500 milliseconds, and so on. What exactly is your expected result? – John Montgomery Commented Jan 15, 2020 at 18:43
• 1 Just write out, what 1000 / index is, for index in [1, 10]. Long story short, y = 1/x is not linear. – ASDFGerte Commented Jan 15, 2020 at 18:44
• Could also just write the for loop like this: for (let i = 10; --i;) { }. Is the delay something you want? What is the result you want? Please be more clear. – Stephen M Irving Commented Jan 15, 2020 at 18:44
• 1 @StephenMIrving The question stays the same: How does that (renaming a variable) help at all? – Andreas Commented Jan 15, 2020 at 18:45
• @John Montgomery, the expected result is next: i want to decrease 10 till 1 and the interval between each iteration should be equal with 1000 sec, for example. – Asking Commented Jan 15, 2020 at 18:46

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 3

If you want an equal interval, your loop is fine, you just need to fix the math for calculating the timeout:

const btn = document.getElementById('btn');
btn.addEventListener('click', function(){
  
    for (let index = 10; index > 0; index--) {
        setTimeout(() => {
            console.log(index)
        },  1000*(10-index));      
    }
})

<div class="app">
  <button id="btn">click</button>
</div>

That will count down from 10 to 1 once every second, just change the 1000 as needed if you want it to be faster or slower.

Note that the order of the loop doesn't actually matter here (aside from a few ms difference in execution time) since it's asynchronous - you could use a non-reversed loop and still get the same result to the human eye.

If you use promises and async/await you can avoid the setTimeout overload and have precise control. The difference between this and John Montgomery's answer is this doesn't care how many times you loop. Do 10000 if you want, you won't get 10000 setTimeouts running at the same time.

const btn = document.getElementById('btn');
const wait = time=>new Promise(resolve=>setTimeout(resolve,time))
btn.addEventListener('click', async function(){      
    for (let index = 10; index > 0; index--) {
        await wait(1000)
        console.log(index)
    }
})

<div class="app">
  <button id="btn">click</button>
</div>

Async functions allow you to use the await keyword. This is a neat new feature in javascript that let's you write async code (like setTimout) as if it was sync.

const wait = time=>new Promise(resolve=>setTimeout(resolve,time)) is a fairly mon helper function developers keep around for times you need to just wait some amount of time and then do something. By await'ing the wait(1000) function, I hang the execution of the loop until the time is done.