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 stackoverflow.com/questions/22154129/… — Yaser
– Yaser, Commented Jan 20, 2017 at 2:17
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? — user663031
– user663031, Commented Jan 20, 2017 at 2:51

tklg · Accepted Answer · 2017-01-20 02:32:45Z

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, 2017 at 2:32

tklg

2,6522 gold badges21 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user663031 Over a year ago

They're starting at the same time, but the timeout value is i * 1000, so shouldn't they fire one second apart?

thedayturns · Accepted Answer · 2017-01-20 02:43:45Z

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);

Collectives™ on Stack Overflow

JavaScript setTimeout in a For loop issue

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related