使用jQuery读取TXT文件无法在函数外部获取返回值的问题

你遇到的这个问题其实是异步编程里非常常见的坑，我来给你拆解清楚原因和解决办法：

为什么外部的console.log没有内容？ #

$.get是异步HTTP请求，代码执行的时候，不会等着请求完成再往下走。也就是说：

1. 你调用$.get后，浏览器会后台发送请求去拿basketball.txt的内容
2. 与此同时，代码会直接跳到外部的console.log(causes)执行，这时候回调函数里的causes = data.split('\n')还没运行，所以causes还是初始的空数组
3. 等请求完成后，才会执行回调函数里的代码，这时候第一个console.log才能输出正确结果

几种解决办法 #

方法1：把逻辑放到回调函数内部 #

最直接的方式是，所有需要用到causes的代码都写到$.get的回调里：

function getCauses() {
  var causes = new Array();
  if ($("#game-type").val() == "basketball") {
    $.get('basketball.txt', function(data) {
      causes = data.split('\n');
      console.log(causes); // 此处能正确输出
      // 所有需要使用causes的逻辑都写在这里
      processCauses(causes); // 比如调用一个处理函数
    });
  }
}

function processCauses(causes) {
  // 这里处理causes数据
  console.log("处理后的结果：", causes);
}

方法2：传入自定义回调函数 #

如果不想把所有逻辑都塞到$.get的回调里，可以让getCauses接受一个回调参数，在请求完成后调用它：

function getCauses(callback) {
  var causes = new Array();
  if ($("#game-type").val() == "basketball") {
    $.get('basketball.txt', function(data) {
      causes = data.split('\n');
      console.log(causes); // 此处能正确输出
      // 把结果传给自定义回调
      callback(causes);
    });
  } else {
    // 如果不是篮球类型，也返回空数组给回调
    callback(causes);
  }
}

// 使用的时候这样调用
getCauses(function(result) {
  console.log("拿到的causes：", result);
  // 在这里写所有需要用result的逻辑
});

方法3：用Promise + async/await（更现代的方式） #

jQuery的AJAX方法返回的是Deferred对象，它和标准Promise兼容，我们可以用Promise封装，再配合async/await让代码看起来像同步一样：

function getCauses() {
  return new Promise((resolve, reject) => {
    var causes = new Array();
    if ($("#game-type").val() == "basketball") {
      $.get('basketball.txt', function(data) {
        causes = data.split('\n');
        resolve(causes);
      }).fail(error => {
        // 请求失败时返回错误
        reject(new Error(`请求失败：${error.statusText}`));
      });
    } else {
      resolve(causes);
    }
  });
}

// 使用async/await调用
async function useCauses() {
  try {
    const causes = await getCauses();
    console.log("拿到的causes：", causes);
    // 后续处理逻辑
  } catch (err) {
    console.error(err);
  }
}

// 执行函数
useCauses();

核心总结 #

异步操作的关键就是：不能在异步操作未完成时直接获取结果，必须等待异步操作完成后，通过回调、Promise或者async/await的方式来处理结果。

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