如何让getJSON同步执行？实现run()函数按顺序调用

嘿，我来帮你解决这个顺序执行异步请求的问题～

你的核心问题是**$.getJSON是异步操作**，for循环会同步快速跑完所有迭代，一下子把10个请求都发出去了，根本不会等前一个请求完成再走下一个。要实现你想要的「请求1完成→run()→请求2→run()……」的顺序，给你两种实用的解决方法：

方法1：递归函数（兼容所有jQuery版本） #

写一个递归函数，每次处理完当前请求并执行run()后，再触发下一个请求，完美实现顺序控制：

function handleNextRequest(i) {
  // 终止条件：处理完10个请求就停止
  if (i >= 10) return;

  $.getJSON('a', {id: i}, function(data) {
    // 注意：$.getJSON会自动把响应解析成JSON对象，不用再手动JSON.parse啦
    collectInfo = data;
    run();
    // 当前请求处理完，递归处理下一个
    handleNextRequest(i + 1);
  });
}

// 启动第一个请求
handleNextRequest(0);

方法2：用async/await（更简洁，需要jQuery 3.0+） #

从jQuery 3.0开始，$.getJSON返回Promise对象，搭配async/await可以写出更直观的同步风格代码：

async function processRequestsInOrder() {
  // 用let声明i，避免循环中异步回调的变量污染问题
  for (let i = 0; i < 10; i++) {
    // 等待当前请求完成
    const data = await $.getJSON('a', {id: i});
    collectInfo = data;
    run();
  }
}

// 启动流程
processRequestsInOrder();

为啥原代码会失效？ #

原代码的for循环会瞬间执行完10次迭代，每一次都立刻发起$.getJSON请求——这些请求是异步的，会在后台并行跑，等请求各自完成后才会触发回调执行run()，所以就出现了「10个请求先全部发起」的情况，而且run()的执行顺序还可能乱掉。

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