JavaScript: setTimeout внутри цикла
как ведет себя функция setTimeout внутри цикла

Функция setTimeout()
является асинхронной, а это означает, что она запускается, только после выполнения всех операций в основном потоке данных JavaScript. Но, что получится, если поместить эту функцию в цикл for
.
for (var i = 0; i < 5; i++) {
setTimeout(() => console.log(i), 0)
}
Какой результат будет выведен на экран после выполнения такого кода?
Для начала упростим задачу: поместим в цикл только console.log(i)
без setTimeout()
. В таком случае операции будут выполняться в основном потоке: с каждой итерацией в консоли будет появляться текущее значение переменной i
. В результате на экране появится последовательность из пяти чисел от 0 до 4.
В случае с использованием setTimeout()
внутри цикла, console.log
будет выполняться только после завершения всех операций в стеке, а значит после того, как все итерации цикла буду выполнены и значение переменной i
достигнет цифры 5.
Переменная i
объявлена с помощью var
. А это означает, что она является глобальной и промежуточные значения такой переменной не будут сохраняться внутри стрелочной функции () => console.log(i)
.
Таким образом, на экран 5 раз будет выведено значение 5. Каждый раз в новой строке.
Спасибо за внимание.