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