嘿，我完全懂你现在的困惑——异步操作的“时间差”确实是新手容易踩的坑！你尝试用全局变量没生效，核心原因是FileReader读取文件是异步的：当你在事件监听外部访问全局变量时，文件还没读完、数据还没解析完成，所以变量自然是空的。

下面给你几个实用的解决方案，一步步帮你解决问题：

原因拆解 #

先简单说清楚为什么全局变量没起作用：

• 当你提交表单时，reader.readAsText(input)会发起一个异步读取请求，浏览器不会等着它读完，而是继续执行后面的代码。
• 你在外部定义的全局变量，在页面加载完成后就会被访问，但这时候reader.onload还没触发（文件还没读完），所以变量里根本没有数据。

解决方案1：用回调函数处理数据（最直观） #

把需要使用CSV数据的逻辑封装成一个独立函数，在reader.onload里数据解析完成后调用这个函数。这样就能保证数据准备好之后才会被处理。

修改你的代码如下：

const myForm = document.getElementById("myForm");
const csvFile = document.getElementById("csvFile");

function csvToArray(str, delimiter = ",") {
  // 原解析逻辑不变
  const headers = str.slice(0, str.indexOf("\n")).split(delimiter);
  const rows = str.slice(str.indexOf("\n") + 1).split("\n");
  const arr = rows.map(function (row) {
    const values = row.split(delimiter);
    const el = headers.reduce(function (object, header, index) {
      object[header] = values[index];
      return object;
    }, {});
    return el;
  });
  return arr;
}

// 新增：处理CSV数据的回调函数
function handleCSVData(data) {
  // 这里写你需要用数据做的任何操作
  console.log("解析后的CSV数据:", data);
  // 替换document.write（它会覆盖整个页面），比如把数据展示在页面上
  const resultContainer = document.createElement('div');
  resultContainer.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
  document.body.appendChild(resultContainer);
  
  // 如果确实需要全局变量，在这里赋值
  window.parsedCSVData = data;
}

myForm.addEventListener("submit", function (e) {
  e.preventDefault();
  const input = csvFile.files[0];
  const reader = new FileReader();

  reader.onload = function (e) {
    const text = e.target.result;
    const data = csvToArray(text);
    // 数据解析完成后，调用回调函数
    handleCSVData(data);
  };

  reader.readAsText(input);
});

之后如果你需要在其他地方访问数据，只要确保是在handleCSVData执行之后（比如用户点击某个按钮时），就可以直接用window.parsedCSVData。

解决方案2：用Promise + async/await（更现代的写法） #

把文件读取和解析的过程包装成Promise，这样可以用async/await让异步代码看起来像同步代码，逻辑更清晰。

修改代码如下：

const myForm = document.getElementById("myForm");
const csvFile = document.getElementById("csvFile");

function csvToArray(str, delimiter = ",") {
  // 原解析逻辑不变
  const headers = str.slice(0, str.indexOf("\n")).split(delimiter);
  const rows = str.slice(str.indexOf("\n") + 1).split("\n");
  const arr = rows.map(function (row) {
    const values = row.split(delimiter);
    const el = headers.reduce(function (object, header, index) {
      object[header] = values[index];
      return object;
    }, {});
    return el;
  });
  return arr;
}

// 包装成Promise
function readCSVFile(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const text = e.target.result;
      const parsedData = csvToArray(text);
      resolve(parsedData);
    };
    reader.onerror = () => {
      reject(new Error("读取CSV文件失败"));
    };
    reader.readAsText(file);
  });
}

// 用async/await处理异步
myForm.addEventListener("submit", async function (e) {
  e.preventDefault();
  const input = csvFile.files[0];
  if (!input) {
    alert("请先选择CSV文件！");
    return;
  }
  
  try {
    // 等待文件读取和解析完成
    const data = await readCSVFile(input);
    console.log("解析后的CSV数据:", data);
    // 同样可以赋值给全局变量
    window.parsedCSVData = data;
    // 处理数据的逻辑
    const resultContainer = document.createElement('div');
    resultContainer.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    document.body.appendChild(resultContainer);
  } catch (err) {
    console.error(err.message);
  }
});

这种写法的好处是代码结构更线性，出错处理也更方便（用try/catch捕获错误）。

注意事项 #

• 不要再用document.write：它会覆盖整个页面内容，推荐用DOM操作（比如appendChild）来展示数据。
• 如果用全局变量，一定要确保在数据加载完成后再访问它：比如不要在页面加载时直接console.log(window.parsedCSVData)，这时候数据还没准备好；可以加一个按钮，点击按钮时再打印或使用数据。

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