JavaScript回调异步问题：首次点击返回undefined的原因排查

你碰到的这个问题，核心点在于FileReader的文件读取是异步操作，咱们来理清楚代码的执行顺序，就能明白为什么第一次点击输出undefined，第二次才正常：

1. 点击按钮触发handleFile()，接着调用readData(showData)
2. 在readData里，你初始化了data变量、获取文件、创建FileReader实例并调用readAsText——但readAsText不会等着文件读完再往下走，它是在后台异步执行的
3. 这时候你直接调用了callback(data)，但此时fileReader.onload还没触发，data还是初始的undefined，所以第一次点击控制台输出undefined
4. 等第一次点击的异步读取完成后，onload回调才会执行，把data赋值为文件内容
5. 第二次点击按钮时，readData里的data已经是上一次赋值后的内容了，所以callback(data)能输出正确结果

正确的写法：把回调放在异步操作的完成回调里 #

要让showData只有在文件读取完成后才执行，你需要把callback(data)放到fileReader.onload的回调函数内部，这样就能保证只有当异步读取完成、数据已经准备好时，才会触发回调：

function readData(callback) {
  var fileToLoad = document.getElementById("file-to-load").files[0];
  var fileReader = new FileReader();
  fileReader.readAsText(fileToLoad, "UTF-8");
  fileReader.onload = function (fileLoadedEvent) {
    var data = fileLoadedEvent.target.result;
    callback(data); // 在这里调用回调，确保数据已读取完成
  }
}

function showData(data) {
  console.log(data);
}

function handleFile() {
  readData(showData);
}

另外补充个小优化：之前你把data定义在readData的外层作用域，这会导致变量被多次点击操作共享，容易出现意外的状态残留。把data移到onload回调内部定义，能让每次读取操作的状态都是独立的，避免潜在问题。

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