循环内调用Ajax始终返回最终索引值的技术问题求助

问题核心原因 #

这是JavaScript里典型的闭包+异步执行时机问题：

• for循环是同步执行的，会快速走完所有迭代；而Ajax请求是异步操作，它的成功回调要等请求完成后才会执行。
• 循环里的所有Ajax回调共享同一个i变量的引用，而不是每次迭代时的i值。当回调触发时，循环已经完全结束，i已经变成了数组的长度6（数组[1,2,3,4,5,6]的索引是0-5，循环结束时i会自增到6才退出循环），所以回调里打印的i始终是6。

解决办法 #

给你三种常用的修复方案：

1. 用let声明循环变量（ES6+推荐）

把循环里的var i改成let i，因为let在for循环的每次迭代都会创建一个新的变量绑定，每个回调会捕获当前迭代的i值：

if (f_ref === 209) {
  const arr = [1,2,3,4,5,6];
  for (let i = 0; i < arr.length; i++) {
    console.log('循环中i的值:', i);
    $.ajax({
      url: '/你的接口地址',
      method: 'POST',
      data: { id: arr[i] },
      success: function(res) {
        console.log('回调中i的值:', i);
        document.getElementById(`element-${arr[i]}`).textContent = res.data;
      }
    });
  }
}

2. 用立即执行函数(IIFE)封装（兼容ES5及更早）

在循环内部用IIFE创建独立作用域，把当前迭代的i值传进去，让回调捕获这个作用域里的变量：

if (f_ref === 209) {
  const arr = [1,2,3,4,5,6];
  for (var i = 0; i < arr.length; i++) {
    console.log('循环中i的值:', i);
    // 用IIFE封装当前i值
    (function(currentIndex) {
      $.ajax({
        url: '/你的接口地址',
        method: 'POST',
        data: { id: arr[currentIndex] },
        success: function(res) {
          console.log('回调中索引值:', currentIndex);
          document.getElementById(`element-${arr[currentIndex]}`).textContent = res.data;
        }
      });
    })(i);
  }
}

3. 改用forEach遍历数组

forEach的每次迭代都会生成独立作用域，回调能直接拿到当前迭代的索引和元素值，避免闭包引用问题：

if (f_ref === 209) {
  const arr = [1,2,3,4,5,6];
  arr.forEach(function(item, index) {
    console.log('循环中索引值:', index);
    $.ajax({
      url: '/你的接口地址',
      method: 'POST',
      data: { id: item },
      success: function(res) {
        console.log('回调中索引值:', index);
        document.getElementById(`element-${item}`).textContent = res.data;
      }
    });
  });
}

内容的提问来源于stack exchange，提问作者Aram