Вывод: три раза $3$ (в консоли будет примерно)
$3$ $3$ $3$
Почему: переменная $i$ объявлена как $var$ — она имеет функциональную (не блочную) область видимости. Колбэки в setTimeout замыкают одну и ту же переменную $i$. К моменту выполнения таймаутов цикл уже завершён и $i=3$, поэтому все колбэки выведут $3$.
Как исправить (минимум два способа):
1) Использовать блочную переменную $let$ в заголовке цикла:
for (let i = $0$; i < $3$; i++) {
setTimeout(function(){ console.log(i); }, $100$);
}
2) Захватить текущее значение $i$ в замыкании через IIFE:
for (var i = $0$; i < $3$; i++) {
(function(j){
setTimeout(function(){ console.log(j); }, $100$);
})(i);
}
Дополнительно (еще варианты):
- Передать аргумент в setTimeout (в средах, где это поддерживается):
for (var i = $0$; i < $3$; i++) {
setTimeout(function(j){ console.log(j); }, $100$, i);
}
- Использовать bind:
for (var i = $0$; i < $3$; i++) {
setTimeout(console.log.bind(null, i), $100$);
}