使用 setTimeout 理解 Javascript 循环

Question

Why this function returns junk value followed by 5 5s

for (var j = 0; j < 5; j++) {
    setTimeout(function () {
        console.log(j);
    }, 1000);
}

Answer 1

The observed behavior is as desired. You can update your code to following

for(var j=0;j<5;j++){
  (function(index){
    setTimeout(function(){console.log(index);},1000);
  })(j);
}

The above paints the expected/correct values ie 0,1,2,3,4

As per question, all the timeout functions are sharing a common variable j, hence, when the first logging was done, till then j was already updated to 5.

So, you need to make sure you have private copies for each timeout function. Hence, in order to achieve the expected/correct values, you need to use closures.

Answer 2

The returned value is returned from setTimeout() . It is not junk value, it is the id of the timeout.

timeoutID is the numerical ID of the timeout, which can be used later with window.clearTimeout().

This id associated with timeout is used when clearing the timeout.

var timeoutID = setTimeout(function() {
    console.log('hello');
}, 1000);

clearTimeout(timeoutID);

Another problem in your code is that it'll always print 5 in console. Because, the time when the setTimeout callback is executed, the loop is already executed and the value of j is 5 .

To solve this use closure inside the loop.

 for (var j = 0; j < 5; j++) { (function(j) { setTimeout(function() { document.write(j + '<br />'); }, 1000); }(j)); }