它打印十次十次我不明白为什么?

时间:2016-07-29 17:57:55

标签: javascript closures

var i;
var print = function(){
  console.log(i);
};
for(i = 0 ; i<10;i++){
 setTimeout(print,1000);
};

打印10次我无法理解为什么?

3 个答案:

答案 0 :(得分:0)

setTimeout是异步调用。这意味着,它只在整个循环执行后才会执行。在你的JS解释器中,它将是这样的:

 1: for loop.                               // i = 0
 2: send setTimeout #1.     increment i.    // i = 1
 3: send setTimeout #2.     increment i.    // i = 2
 4: send setTimeout #3.     increment i.    // i = 3
 5: send setTimeout #4.     increment i.    // i = 4
 6: send setTimeout #5.     increment i.    // i = 5
 7: send setTimeout #6.     increment i.    // i = 6
 8: send setTimeout #7.     increment i.    // i = 7
 9: send setTimeout #8.     increment i.    // i = 8
10: send setTimeout #9.     increment i.    // i = 9
11: send setTimeout #10.    increment i.    // i = 10
12: finish for loop.                        // i = 10
13: exec setTimeout #1.                     // i = 10
14: exec setTimeout #2.                     // i = 10
15: exec setTimeout #3.                     // i = 10
16: exec setTimeout #4.                     // i = 10
17: exec setTimeout #5.                     // i = 10
18: exec setTimeout #6.                     // i = 10
19: exec setTimeout #7.                     // i = 10
20: exec setTimeout #8.                     // i = 10
21: exec setTimeout #9.                     // i = 10
22: exec setTimeout #10.                    // i = 10

执行阶段发生时,i已经为10。

正确的方法是使用Closures。它们通过打包变量的值来维护环境值。

&#13;
&#13;
var i;
var print = function(i) {
  console.log(i);
};
for (i = 0; i < 10; i++) {
  (function (a) {
    setTimeout(function () {
      print(a);
    }, 1000);
  })(i);
}
&#13;
&#13;
&#13;

答案 1 :(得分:0)

这是因为JavaScript事件循环。所有setTimeout都堆叠在事件循环队列的那一端。一旦你的for循环完成(当我已经增加到10时),所有setTimeouts都开始执行。因此,你总是看到10张印刷品。

答案 2 :(得分:0)

从闭包中选择

n值。它包含值= 1,2,3 ...同时创建函数。

&#13;
&#13;
var i ;
var print = function(n){
  console.log(n);
};
for(i = 0 ; i<10;i++){
 setTimeout((function(n){
   return function () {
     print(n);  
   }
 })(i),1000);
};
&#13;
&#13;
&#13;