javascript - setTimeout は、閉鎖のために連続した数字を出力しません

Question

重複の可能性:
for ループで setTimeout を使用し、i を値として渡す

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

5これは5 回印刷されます。ループが印刷されるようにするにはどうすればよい0, 1, 2, 3, 4ですか?

Answer 1

自己実行クロージャーでラップします。

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

注: setTimeout の function-expression の引数は使用されていないので、それを取り出しました。また、グローバル変数を使用するのもよくありません。varキーワードを使用して変数を作成します。

this.i;も必要ありません。単に使用してiください。

Answer 2

このような：

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

ここで重要なのは、JavaScriptには関数スコープ*しかないため、ループごとに異なるスコープを作成する唯一の方法は、ループの内臓を関数でラップすることです。このようにして、関数はループのその反復のsetTimeout周りにクロージャを作成します。i

編集：

*letキーワードはES6で提供され、ブロックスコープのローカル変数を宣言できるようになります。Chrome 31は、実験的な機能を有効にしないとサポートされないため、互換性を確認してください。

Answer 3

これを試して：

var i=0;
var fn;
fn=function(){
      console.log(i)
      i++;
      if(i<=4)setTimeout(fn,1000);
   }
setTimeout(fn,1000);

これにより、毎秒1つの数値が5回出力されます。