10回10回プリントする理由を理解できませんか？

Question

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

これは10回10回印刷されますが、なぜわかりませんか？

Answer 1

setTimeoutは、非同期呼び出しです。つまり、ループ全体が実行された後にのみ実行されます。あなたのJSインタプリタでは、それはこのようになります：実行フェーズが起こると、iはすでに10

だろう

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 

これを行うための正しい方法は、クロージャを使用しています。変数の値をパックすることによって、環境値を維持します。

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

Answer 2

これは、JavaScriptのイベントループです。すべてのあなたのsetTimeoutsは、イベントループのキューの最後に積み重ねられます。あなたのforループが終了すると（すでに10に増えた時点で）、すべてのsetTimeoutsが実行を開始します。したがって、常に10枚印刷されています。

Answer 3

n値はクロージャから選択されます。それは、関数の作成中に値= 1,2,3 ...を含みます。

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