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