JavaScript setTimeout in a For loop issue

Question

My issue is I am trying to increment the timeout time by the iteration value and time it by 1000. for example if the increment value is 5 it will be 5*1000 on the timeout.

I have tried various ways the first being ->

var textValue = 10;
function doSetTimeout(i) {
   setTimeout(function() { console.log(i); }, i * 1000);
}

for(var i = 1; i <= textValue; i++){
     doSetTimeout(i); 
 }

I also tried this ->

var textValue = 10;
 for(var i = 1; i <= textValue; i++){
     (function () {
         var j = i;         
         setTimeout(function timer() {
               console.log(j);
              },j*1000);
      })();     
 }

All I get on both is that the timeout is always set to 1000 ms even though the variable is being set correctly each time.

Any help would be appreciated.

possible duplicate of http://stackoverflow.com/questions/22154129/javascript-settimeout-loops — Yaser, Jan 20 '17 at 02:17
Possible duplicate of [Javascript, setTimeout loops?](http://stackoverflow.com/questions/22154129/javascript-settimeout-loops) — Yaser, Jan 20 '17 at 02:18
So is the idea that starting at time 0, you want the event to fire at times 1000, 3000, 6000, 10000, 15000, and so on? — , Jan 20 '17 at 02:51

score 2 · Accepted Answer · answered Jan 20 '17 at 02:32

2

The timeout is actually the correct duration, they are just all starting at the same time because setTimeout doesn't stop the execution of the for loop.

This should be what you want:

var textValue = 10;
delayLoop(textValue);

function delayLoop(to, at) {
    var at = at || 1;
    if (at <= to) {
        setTimeout(function() {
            console.log(at);
            delayLoop(to, at + 1);
        }, 1000 * at);
    }
}

answered Jan 20 '17 at 02:32

tklg

2,572
2
19
24

They're starting at the same time, but the timeout value is `i * 1000`, so shouldn't they fire one second apart? – Jan 20 '17 at 02:46

score 1 · Answer 2 · answered Jan 20 '17 at 02:43

You create a bunch of setTimeouts to be triggered after 1000ms, 2000ms, 3000ms, etc. The problem is that you create them all at the same time, so each timeout will come 1 second after the next. There's two ways to solve the problem.

Calculate the correct delay initially for every setTimeout.

The first one should be 1000ms. The second should be after 1000ms + 2000ms. The third should be after 1000 + 2000 + 3000. etc.

var timeoutSum = 0;
for (var i = 1000; i <= 10000; i += 1000) {
    timeoutSum += i;

    setTimeout(function() { console.log("hi!"); }, timeoutSum);
}

Don't trigger the next timeout until you've finished the current one.

We create a function to add a new timeout, and then call it from the function that gets called when the timeout ends. You can think of it as a weird inverted for loop, with the initial value outside and the condition in the middle.

var wait = 1000;

function addTimeout(wait) {
    setTimeout(function() {
        console.log('hi'); 

        if (wait < 10000) {
            addTimeout(wait + 1000);
        }
    }, wait);
}

addTimeout(wait);

JavaScript setTimeout in a For loop issue

2 Answers2