なぜかっこ表記はここでは機能しませんか？

Question

私は、一定の時間間隔をおいて一連のクリックハンドラーを起動する関数を作成しています。

function play(step){ 
    var buttons = document.querySelectorAll('.age'); 
    buttons[0].click(); 
    for (var i = 1; i < buttons.length; i++){ 
     setTimeout(function(b){ 
      b.click(); 
     }, 300 + (step*i), buttons[i]); 
    } 
} 

意図したように上記の機能は、しかし、私にはそれが同等でなければなりませんように、動作しないようです、次のバージョンに機能します。

：私は次のエラーを得ていた

function play(step){ 
    var buttons = document.querySelectorAll('.age'); 
    buttons[0].click(); 
    for (var i = 1; i < buttons.length; i++){ 
     setTimeout(function(b){ 
      console.log(i); 
      console.log(b); 
      b[i].click(); 
     }, 300 + (step*i), buttons); 
    } 
} 

を

TypeError: Cannot read property 'click' of undefined 

チェックの後、console.log（i）が6を印刷していることがわかります。したがって、明らかに、属性アクセスはループが終了するまで発生していません。しかし、ここでは正確に何が起こっていますか？私は比較的新しいjavascriptですが、この動作はクロージャーとして機能する無名関数の結果ですか？それは私の正しい説明のようには聞こえません。それはsetTimeoutが無名関数の評価を遅らせるためですか？

ETA：

私は実験でした：私は遊び（200）を実行すると

 function sleep(ms){ 
      var current = new Date().getTime(); 
      while (current + ms >= new Date().getTime()){}; 
     } 
     function play(step){ 
      var buttons = document.querySelectorAll('.age'); 
      buttons[0].click(); 
      for (var i = 1; i < buttons.length; i++){ 
       setTimeout(function(b){ 
        console.log(b); 
        console.log(i); 
        b[i].click(); 
       }, 300 + (step*i), buttons); 
       sleep(1000); 

      } 
     } 

私は確信していることを行うのに十分な時間でなければなりません（1000）と同じエラーメッセージが表示されますので、寝最初のタイムアウトが始まる前にループが終了していない、いいえ？

Answer 1

これは、forループの変数が各繰り返し（同じ参照）で同じであり、setTimeoutが実行されているときにforループが終了したので、i変数がループの最後の値になるため、これを修正してクロージャを作成できますi変数：

function play(step){ 
    var buttons = document.querySelectorAll('.age'); 
    buttons[0].click(); 
    for (var i = 1; i < buttons.length; i++){ 
     (function(i) { 
      setTimeout(function(b){ 
       console.log(i); 
       console.log(b); 
       b[i].click(); 
      }, 300 + (step*i), buttons); 
     })(i); 
    } 
}