javascript - setTimeout in for-loop does not print consecutive values

ID : 10218

viewed : 14

Tags : javascriptjavascript

Top 5 Answer for javascript - setTimeout in for-loop does not print consecutive values

vote vote


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.

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.


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.

vote vote


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

vote vote


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.

vote vote


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


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.

Top 3 video Explaining javascript - setTimeout in for-loop does not print consecutive values