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