如何解决$.getJSON与for循环配合时循环先执行完毕的问题

我懂你碰到的这个坑啦！$.getJSON是异步操作，而for循环是同步执行的，所以循环会直接跑完，请求还在后台慢悠悠处理，而且还会因为变量作用域的问题，导致回调里拿到的都是最后一个userProviderKey的值。下面给你几个实用的修改方案：

方案1：用ES6的let创建块级作用域 #

这是最简单的方案，适合支持ES6的环境。let会在每个循环迭代中创建独立的变量绑定，确保回调函数能拿到当前循环的正确值：

// 先把字符串拆分成数组
const userProviderKeys = '0be32d8057924e718a8b6b4186254756,2dc5f826601e4cc5a9a3424caea4115f'.split(',');

for (let i = 0; i < userProviderKeys.length; i++) {
  let currentKey = userProviderKeys[i];
  // 替换成你的实际接口地址，把currentKey作为参数传入
  $.getJSON(`/your-api-endpoint?key=${currentKey}`, function(data) {
    // 在这里处理返回的JSON数据，填充到HTML表格
    // 举个例子：假设表格tbody的id是table-body，追加一行数据
    $('#table-body').append(`<tr><td>${data.username}</td><td>${data.info}</td></tr>`);
  });
}

方案2：用闭包保存循环变量 #

如果你的项目需要兼容不支持ES6的旧环境，可以用立即执行函数（IIFE）创建闭包，把当前循环的变量“固定”住：

const userProviderKeys = '0be32d8057924e718a8b6b4186254756,2dc5f826601e4cc5a9a3424caea4115f'.split(',');

for (var i = 0; i < userProviderKeys.length; i++) {
  // 立即执行函数，将当前的key作为参数传入
  (function(currentKey) {
    $.getJSON(`/your-api-endpoint?key=${currentKey}`, function(data) {
      // 处理数据并填充表格
      $('#table-body').append(`<tr><td>${data.username}</td><td>${data.info}</td></tr>`);
    });
  })(userProviderKeys[i]);
}

方案3：用数组forEach遍历（更简洁） #

forEach的回调函数会为每个数组元素创建独立的作用域，天然避免了作用域共享的问题，代码也更简洁：

const userProviderKeys = '0be32d8057924e718a8b6b4186254756,2dc5f826601e4cc5a9a3424caea4115f'.split(',');

userProviderKeys.forEach(function(currentKey) {
  $.getJSON(`/your-api-endpoint?key=${currentKey}`, function(data) {
    // 处理数据填充表格
    $('#table-body').append(`<tr><td>${data.username}</td><td>${data.info}</td></tr>`);
  });
});

额外需求：按顺序执行请求 #

如果需要第一个请求完成后再执行第二个（避免同时发起大量请求，或者保证表格按顺序填充），可以用async/await结合Promise：

const userProviderKeys = '0be32d8057924e718a8b6b4186254756,2dc5f826601e4cc5a9a3424caea4115f'.split(',');

async function fetchDataInOrder() {
  for (let currentKey of userProviderKeys) {
    // 把$.getJSON包装成Promise，方便用await等待结果
    const data = await new Promise((resolve, reject) => {
      $.getJSON(`/your-api-endpoint?key=${currentKey}`, resolve)
        .fail(reject); // 处理请求失败的情况
    });
    // 处理数据并填充表格
    $('#table-body').append(`<tr><td>${data.username}</td><td>${data.info}</td></tr>`);
  }
}

// 调用函数开始按顺序请求
fetchDataInOrder();

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