Как добиться корректного вывода значений в асинхронном цикле?

Question

Самый простой способ — использовать let вместо var, так как let создаёт новую переменную для каждой итерации цикла. Также можно использовать IIFE или передавать значение в функцию явно. Эти подходы позволяют каждому асинхронному колбэку работать со “своим” значением. В современном коде предпочтителен let.

YeaHub · Accepted Answer

Решение всегда сводится к одному: создать отдельную область видимости для каждой итерации.1) Использование let (рекомендуемый способ)for (let i = 0; i < 3; i++) { setTimeout(() => { console.log(i); }, 100); } Почему работает:let имеет блочную область видимостина каждой итерации создаётся новая переменная i2) Использование IIFE (устаревающий, но показательный подход)for (var i = 0; i < 3; i++) { (function (value) { setTimeout(() => { console.log(value); }, 100); })(i); } Здесь:значение i копируется в параметр valueкаждый колбэк замыкается на своё значение3) Передача значения в асинхронную функциюfunction logLater(value) { setTimeout(() => console.log(value), 100); } for (var i = 0; i < 3; i++) { logLater(i); } Практическая рекомендацияИспользуй let по умолчаниюvar оставляй только для legacy-кодапонимание IIFE важно для чтения старых проектовВывод: корректный вывод в асинхронном цикле достигается созданием отдельной области видимости для каждой итерации, чаще всего с помощью let.