Papa Parse异步执行问题：如何让后续函数在CSV解析完成后运行

你猜的没错！Papa Parse的parse方法是异步执行的——它会在后台悄悄读取解析CSV文件，同时立刻继续执行后面的代码。所以你在parse方法外面打印dataShort和调用changeData()的时候，CSV还没解析完，这两个变量自然是空的。

要让changeData()只在解析完成后执行，最直接的办法就是把它的调用放到complete回调函数里面，因为这个回调就是专门在解析完成后触发的。

修改后的基础代码示例 #

function parseCSV(evt) {
  var file = evt.target.files[0];
  Papa.parse(file, {
    header: true,
    dynamicTyping: true,
    complete: function (results) {
      dataShort = results.data;
      dataTotal = results.data;
      console.log(results.data);
      console.log("dataShort: " + dataShort);
      console.log("dataTotal: " + dataTotal);
      
      // 在这里调用changeData，确保数据已经准备好
      changeData();
    }
  });
  // 删掉这里的console.log和changeData调用，因为此时解析还没完成
}

function changeData() {
  $.each(dataShort, function (index, item) {
    if (item["Items in CHILDoc"].length > 20) {
      item["Items in CHILDoc"] = item["Items in CHILDoc"].substring(0, 18) + "...";
    }
    if (item["Kwadrant onderdeel in CHILDoc"] != "Ingrijpende gebeurtenissen" && item["Waarde in CHILDoc"].length > 20) {
      item["Waarde in CHILDoc"] = item["Waarde in CHILDoc"].substring(0, 15) + "...";
    }
  });
  dataReady();
}

进阶优化：避免全局变量（推荐） #

如果不想依赖全局变量dataShort和dataTotal，可以把解析结果作为参数直接传给changeData，这样代码更模块化，也不容易出现变量污染的问题：

function parseCSV(evt) {
  var file = evt.target.files[0];
  Papa.parse(file, {
    header: true,
    dynamicTyping: true,
    complete: function (results) {
      const parsedData = results.data;
      console.log(parsedData);
      
      // 把解析后的数据作为参数传入changeData
      changeData(parsedData);
    }
  });
}

function changeData(data) {
  // 直接使用传入的data，不再依赖全局变量
  $.each(data, function (index, item) {
    if (item["Items in CHILDoc"].length > 20) {
      item["Items in CHILDoc"] = item["Items in CHILDoc"].substring(0, 18) + "...";
    }
    if (item["Kwadrant onderdeel in CHILDoc"] != "Ingrijpende gebeurtenissen" && item["Waarde in CHILDoc"].length > 20) {
      item["Waarde in CHILDoc"] = item["Waarde in CHILDoc"].substring(0, 15) + "...";
    }
  });
  // 如果dataReady也需要数据，同样可以传过去
  dataReady(data);
}

原理说明 #

异步操作的核心逻辑就是：所有依赖异步结果的代码，都必须放在异步完成的回调（或者Promise的then/await后面）里面。这样才能保证当你使用数据的时候，它已经被正确加载和解析完毕了。

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