&引用；更改“；事件落后于javascript一步

我正在尝试制作一个非常简单的网页，它接受一个输入文件并在控制台中显示内容。当我尝试使用它时，它有点工作，但总是落后一步。比如说,

1） 上载“1.txt”->控制台打印

2） 上传“2.txt”->控制台打印“1.txt”的内容

3） 上传“3.txt”->控制台打印“2.txt”的内容

函数readData（）{
var fileholder=document.querySelector（“#knotFiles”）；
变量内容='空'；
var reader=new FileReader（）；
reader.onload=函数（事件）{
内容=event.target.result；
}
fileholder.addEventListener（“输入”，函数（事件）{
var files=fileholder.files；
reader.readAsText（文件[0]）；
控制台日志（内容）；
}，假）；
返回内容；
};
readData（）
render.onload
是排序
content=event.target.result中的一个
async
函数
将在最后执行，因此put
console.log（content）内部
render.onload
查看
内容中的最新更改
数据

function readData(){
  var fileholder = document.querySelector('#knotFiles');
  var content = 'Empty';
  var reader = new FileReader();
  reader.onload = function(event){
    content = event.target.result;
    console.log(content);
  }
  fileholder.addEventListener("input", function(event) {
    var files = fileholder.files;
    reader.readAsText(files[0]);

  }, false);
  return content;
};

readData();

FileReader（）
异步加载-您正在输出上一个结果，因为变量
content
在触发事件侦听器回调之前尚未更新。重写如下：

var fileholder = document.querySelector('#knotFiles');
fileholder.addEventListener("input", function(event) {
    readData();
}, false);

function readData(){  
    var content = '';
    var files = fileholder.files;
    var reader = new FileReader();
    reader.readAsText(files[0], "UTF-8"); // assumed this encoding
    reader.onload = function(event){
        content = event.target.result;
        console.log(content);
        return content;
    };
}

移动
console.log（内容）
into
reader.onload
函数，因为当读取操作成功完成时，将触发此事件。当我执行此操作时，它显示在我首次上载文件时不会调用“onload”；只有当我上传第二个不同名称的文件时。谢谢你，你知道有什么资源可以防止我将来犯类似的错误吗？你的大脑和stackoverflow；）也许还有像……这样的网站。。。。