JavaScript异步循环中索引错位问题源于var声明的i被闭包引用而非复制，IIFE通过传参创建独立作用域锁定当前索引值；ES6推荐用let声明或forEach替代。
在 JavaScript 异步循环中，常见的“索引错位”问题（比如 for 循环里用 setTimeout 或 fetch 打印 i 总是输出最后一个值），本质是闭包捕获了变量的**引用**而非**当前值**。IIFE 是一种经典解法，它通过立即执行创建独立作用域，把每次循环的索引“快照”下来。
为什么原始 for 循环会出错
因为 var 声明的 i 是函数作用域，所有异步回调共享同一个 i 变量；等异步任务真正执行时，循环早已结束，i 已变成终值（如 5）。
例如：
for (var i = 0; i < 5; i++) {
setTimeout(() => console.log(i), 100); // 输出 5 次 5
}
用 IIFE 锁定每次迭代的索引值
IIFE 在每次循环中立即执行，把当前 i 作为参数传入，形成一个封闭的局部变量（如 index），异步回调内部引用的是这个不会被后续循环修改的副本。
- 写法：将
i作为参数传给一个立即执行的匿名函数 - 关键点：参数名和外部变量名可不同，避免混淆（推荐用
index、idx等） - 注意括号位置：函数定义和调用必须包裹在一对括号内，否则语法报错
修复示例：
for (var i = 0; i < 5; i++) {
(function(index) {
setTimeout(() => console.log(index), 100);
})(i);
}
// 输出：0, 1, 2, 3, 4
现代替代方案（更推荐）
IIFE 有效但略显冗余。ES6+ 提供更简洁自然的解法：
-
用
let声明循环变量：块级作用域保证每次迭代有独立绑定 -
用
for...of+ 解构：配合数组索引或entries()方法直接拿到当前项与索引 -
封装为工具函数：如
forEachAsync，内部用let或递归控制顺序
推荐写法：
for (let i = 0; i < 5; i++) {
setTimeout(() => console.log(i), 100); // 正确输出 0~4
}
// 或使用数组方法
[0,1,2,3,4].forEach((item, index) => {
setTimeout(() => console.log(index), 100);
});
实际异步场景中的注意事项
在真实项目中（如批量请求），光锁住索引还不够，还需考虑：
- 错误处理：每个异步操作应有独立
try/catch或.catch - 并发控制：避免同时发起几十个请求，可用
Promise.allSettled配合分批 - 上下文一致性：如果异步回调需要访问循环中的对象属性，也建议一并传入 IIFE 或闭包（如
(i, item) => {...}）
示例（安全的请求封装）：
const urls = ['/api/1', '/api/2', '/api/3'];
for (let i = 0; i < urls.length; i++) {
(function(url, idx) {
fetch(url)
.then(res => res.json())
.then(data => console.log(`Index ${idx}:`, data))
.catch(err => console.error(`Failed at ${idx}:`, err));
})(urls[i], i);
}
