异步FileReader致getData返回空，如何修复Plotly双图绘制问题？

问题核心是FileReader.onloadend属于异步执行逻辑，你的getDataDualLong/getDataDualShort函数会在文件读取、数据处理完成前就执行return语句，导致返回空值。以下是具体修复步骤：

1. 改造getData系列函数返回Promise #

将原来的同步返回逻辑改为异步Promise，在数据处理完成后通过resolve返回最终结果：

修改后的getDataDualLong（getDataDualShort格式完全一致，直接复用逻辑即可） #

function getDataDualLong() {
  return new Promise((resolve) => {
    const fr = new FileReader();
    fr.onloadend = e => {
      let r = fr.result.split("\n").map(e => e.split(","));
      const gateWidth = document.querySelector('#gateWidthDual').value;
      const numFingers = document.querySelector('#numFingersDual').value;
      let zeroPoint = document.querySelector('#zeroPointDualLong').value;
      const newtable = TableCsv.formatArrLongTime(r, gateWidth, numFingers);

      // 处理起始点逻辑
      let start = TableCsv.getSecondFive(newtable, 2) - 2;
      if (zeroPoint !== "") {
        start = (Number(zeroPoint) * 2) - 1;
      } else {
        document.querySelector('#zeroPointDualLong').value = (start / 2 + 0.5).toString();
      }
      
      // 收集绘图所需数据
      let time = 0;
      const timeValues = [];
      const JDValues = [];
      const slicedTable = newtable.slice(start);
      for (let i = 1; i < slicedTable.length; i++) {
        timeValues.push(time);
        JDValues.push(TableCsv.regex(`'${slicedTable[i][3]}'`));
        time += 500000;
      }

      // 数据处理完成后返回结果
      resolve([timeValues, JDValues]);
    };
    fr.readAsText(document.querySelector("#csvFileInputDualLong").files[0]);
  });
}

2. 改造plotDual为异步函数 #

使用async/await语法等待两个数据获取函数都完成后，再执行绘图逻辑：

修改后的plotDual函数 #

async function plotDual(){
  // 等待两个异步数据获取任务完成
  const short = await getDataDualShort();
  const long = await getDataDualLong();

  const trace1 = {
    x: short[0],
    y: short[1],
    type: 'scatter'
  };

  const trace2 = {
    x: long[0],
    y: long[1],
    type: 'scatter'
  };

  const layout = {
    xaxis: {
      type: 'log',
      title: 'Time[s]'
    },
    yaxis: {
      title: 'Current Density [A/m^2]',
      rangemode: 'tozero'
    }
  };

  const data = [trace1, trace2];
  Plotly.newPlot('dualPlot', data, layout);
}

额外优化提示 #

• 给所有变量添加const/let声明，避免全局变量污染（比如原代码中未声明的timeValues、JDValues）
• 用模板字符串替换字符串拼接，提升代码可读性（如TableCsv.regex(''${slicedTable[i][3]}'')）

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