Коротко: в большинстве сред (браузеры, Node) приведённый код выведет три раза $3$. Почему — пояснение и варианты исправления.
Что происходит
- Код: for (var i=$0$; i<$3$; i++){ setTimeout(()=>console.log(i), $0$); }
- Переменная $i$ объявлена через $var$ — она одна на всю функцию (function-scoped). Колбэки, переданные в setTimeout, захватывают ссылку на эту одну переменную $i$.
- Таймеры с задержкой $0$ всё равно ставятся в очередь событий и выполняются после завершения текущего стека, то есть после окончания цикла. К моменту выполнения колбэков $i$ уже равно $3$. Поэтому вывод: $3,3,3$.
- Замечание про движки: сам принцип лексического/функционального скоупа и очереди событий общ для современных движков (V8, SpiderMonkey, JavaScriptCore). В редких нестандартных средах или старых шеллах реализация setTimeout может отличаться (например, тестовые шеллы могут выполнять таймеры синхронно), тогда вывод может отличаться, но в реальных браузерах/Node — поведение описано выше.
Как исправить (как минимум три варианта)
1) Использовать блочную область видимости через let:
for (let i=$0$; i<$3$; i++){
setTimeout(()=>console.log(i), $0$);
}
// Выведет: $0,1,2$
2) Замкнуть текущее значение в IIFE (функция-замыкание):
for (var i=$0$; i<$3$; i++){
(function(j){
setTimeout(()=>console.log(j), $0$);
})(i);
}
// Выведет: $0,1,2$
3) Передать значение как аргумент setTimeout (поддерживается в большинстве сред):
for (var i=$0$; i<$3$; i++){
setTimeout(function(j){ console.log(j); }, $0$, i);
}
// Или с arrow: setTimeout((j)=>console.log(j), $0$, i);
// Выведет: $0,1,2$
Дополнительные варианты
4) Использовать bind:
for (var i=$0$; i<$3$; i++){
setTimeout(console.log.bind(null, i), $0$);
}
5) В Node.js — использовать setImmediate или process.nextTick с правильным захватом значения (например, в сочетании с let или IIFE) — это альтернатива планированию колбэков, но не решает проблему захвата $var$ сам по себе.
Любой из первых трёх вариантов — самый простой и распространённый способ получить вывод $0,1,2$.