Почему здесь нет скобок нотации?

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:

Я сделал эксперимент:

 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); 

      } 
     } 

при запуске игры (200) я получаю то же сообщение об ошибке, поэтому сон (1000) должно быть достаточно времени, чтобы убедиться, что цикл не вышел до первого таймаута, нет?

Answer 1

Это потому, что в каждой итерации (в той же ссылке) переменная in 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); 
    } 
}