Почему setTimeout в цикле 10 раз выводит "10"?

Question

for (var i = 0; i < 10; i++) {
    setTimeout(function() {
        alert(i);
    }, 100);
}

Answer 1

Потому, что к моменту срабатывания setTimeout, цикл уже полностью выполнится и переменная примет значение равное десяти. А раз на момент вызова переменная уже равна десяти, то и на вывод пойдет десять.

Легкий пример происходящего:

a = 10;
setTimeout(function() {
    console.log(a);
}, 1000);
a += 20; //выполнится раньше, чем вывод

Для решения, Вам надо убрать зависимость и создать локальное замыкание. Поскольку в JS область видимости у функций, Вам надо создать функцию и передать ей значение на текущий момент. Тогда оно будет скопировано, а не использовано как ссылка.

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