dr.Brain

doctor Brain

мир глазами веб-разработчика

JavaScript: setTimeout внутри цикла

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

dr.Brain

время чтения 1 мин.

Photo by Pat Whelen on Unsplash

Функция 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. Каждый раз в новой строке.


Спасибо за внимание.

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.