setTimeout in for-loop does not print consecutive values [duplicate]

setTimeout in for-loop does not print consecutive values [duplicate]

This question already has an answer here:

JavaScript closure inside loops – simple practical example

43 answers

I have this script:
for (var i = 1; i <= 2; i++) { setTimeout(function() { alert(i) }, 100); } But 3 is alerted both times, instead of 1 then 2. Is there a way to pass i, without writing the function as a string?

Solutions/Answers:

Solution 1:

You have to arrange for a distinct copy of “i” to be present for each of the timeout functions.

function doSetTimeout(i) {
  setTimeout(function() { alert(i); }, 100);
}

for (var i = 1; i <= 2; ++i)
  doSetTimeout(i);

If you don’t do something like this (and there are other variations on this same idea), then each of the timer handler functions will share the same variable “i”. When the loop is finished, what’s the value of “i”? It’s 3! By using an intermediating function, a copy of the value of the variable is made. Since the timeout handler is created in the context of that copy, it has its own private “i” to use.

edit — there have been a couple of comments over time in which some confusion was evident over the fact that setting up a few timeouts causes the handlers to all fire at the same time. It’s important to understand that the process of setting up the timer — the calls to setTimeout() — take almost no time at all. That is, telling the system, “Please call this function after 1000 milliseconds” will return almost immediately, as the process of installing the timeout request in the timer queue is very fast.

Related:  Idiomatically find the number of occurrences a given value has in an array

Thus, if a succession of timeout requests is made, as is the case in the code in the OP and in my answer, and the time delay value is the same for each one, then once that amount of time has elapsed all the timer handlers will be called one after another in rapid succession.

If what you need is for the handlers to be called at intervals, you can either use setInterval(), which is called exactly like setTimeout() but which will fire more than once after repeated delays of the requested amount, or instead you can establish the timeouts and multiply the time value by your iteration counter. That is, to modify my example code:

function doScaledTimeout(i) {
  setTimeout(function() {
    alert(i);
  }, i * 5000);
}

(With a 100 millisecond timeout, the effect won’t be very obvious, so I bumped the number up to 5000.) The value of i is multiplied by the base delay value, so calling that 5 times in a loop will result in delays of 5 seconds, 10 seconds, 15 seconds, 20 seconds, and 25 seconds.

Update

Here in 2018, there is a simpler alternative. With the new ability to declare variables in scopes more narrow than functions, the original code would work if so modified:

for (let i = 1; i <= 2; i++) {
    setTimeout(function() { alert(i) }, 100);
}

The let declaration, unlike var, will itself cause there to be a distinct i for each iteration of the loop.

Related:  jQuery.parseJSON throws “Invalid JSON” error due to escaped single quote in JSON

Solution 2:

You can use an immediately-invoked function expression (IIFE) to create a closure around setTimeout:

for (var i = 1; i <= 3; i++) {
    (function(index) {
        setTimeout(function() { alert(index); }, i * 1000);
    })(i);
}

Solution 3:

This’s Because!

  1. The timeout function
    callbacks are all running well after the completion of the loop. In fact,
    as timers go, even if it was setTimeout(.., 0) on each iteration, all
    those function callbacks would still run strictly after the completion
    of the loop, that’s why 3 was reflected!
  2. all two of those functions, though they are defined
    separately in each loop iteration, are closed over the same shared global
    scope
    , which has, in fact, only one i in it.

the Solution‘s declaring a single scope for each iteration by using a self-function executed(anonymous one or better IIFE) and having a copy of i in it, like this:

for (var i = 1; i <= 2; i++) {

     (function(){

         var j = i;
         setTimeout(function() { console.log(j) }, 100);

     })();

}

the cleaner one would be

for (var i = 1; i <= 2; i++) {

     (function(i){ 

         setTimeout(function() { console.log(i) }, 100);

     })(i);

}

The use of an IIFE(self-executed function) inside each iteration created a new scope for each
iteration, which gave our timeout function callbacks the opportunity
to close over a new scope for each iteration, one which had a variable
with the right per-iteration value in it for us to access.

Related:  Download a div in a HTML page as pdf using javascript

Solution 4:

The function argument to setTimeout is closing over the loop variable. The loop finishes before the first timeout and displays the current value of i, which is 3.

Because JavaScript variables only have function scope, the solution is to pass the loop variable to a function that sets the timeout. You can declare and call such a function like this:

for (var i = 1; i <= 2; i++) {
    (function (x) {
        setTimeout(function () { alert(x); }, 100);
    })(i);
}

Solution 5:

You can use the extra arguments to setTimeout to pass parameters to the callback function.

for (var i = 1; i <= 2; i++) {
    setTimeout(function(j) { alert(j) }, 100, i);
}

Note: This doesn’t work on IE9 and below browsers.

Solution 6:

ANSWER?

I’m using it for an animation for adding items to a cart – a cart icon floats to the cart area from the product “add” button, when clicked:

function addCartItem(opts) {
    for (var i=0; i<opts.qty; i++) {
        setTimeout(function() {
            console.log('ADDED ONE!');
        }, 1000*i);
    }
};

NOTE the duration is in unit times n epocs.

So starting at the the click moment, the animations start epoc (of EACH animation) is the product of each one-second-unit multiplied by the number of items.

epoc: https://en.wikipedia.org/wiki/Epoch_(reference_date)

Hope this helps!