JS 变量在函数外部不可用

Question

我的代码中的变量有一个小问题。我有一个在函数外部声明的变量，但在它之后无法访问。因此，首先您输入一个与以下代码组合的文件：input.addEventListener("change", sefunction);现在这个文件（这是一个 HTML 文件）应该被解析为一个字符串：var htmlInput;var inputFile = "";function sefunction() {if (this.files && this.files[0]) {    var myFile = this.files[0];    var reader = new FileReader();    reader.addEventListener('load', function (e) {        inputFile = e.target.result;        htmlInput = new DOMParser().parseFromString(inputFile, "text/html").documentElement;        console.log(htmlInput);            //WORKING FINE        });    reader.readAsBinaryString(myFile);    document.getElementById("starten").disabled = false;    document.getElementById("myFile").disabled = true;    console.log(htmlInput);                //NOT WORKING    initialisation2();  };   };然后，为了测试它，我想 console.log htmlInput：function initialisation2() {    console.log(htmlInput);                //NOT WORKING}现在发生了什么：第一个console.log给了我 的内容htmlInput。第二个和第三个（在initialisation2()）中没有。有人能告诉我为什么吗？该变量是在第一个函数之外声明的，因此它应该在代码的其余部分中可用。我需要像这样解析 HTML 输入文件，因为我希望能够访问htmlInput.getElementsByTagName('table').

Answer 1

该htmlInput变量在第二个之后被赋值console.log并被initialisation2调用。这是因为FileReader是异步的，所以htmlInput直到undefined文件被读取为止。

将调用initialisation2移至load回调中将解决此问题：

reader.addEventListener("load", function(e) {

  inputFile = e.target.result;

  htmlInput = new DOMParser().parseFromString(inputFile, "text/html").documentElement;

  initialisation2();

});

我们可以使用模仿文件读取器异步性的超时来复制正在发生的情况：

var htmlInput;

function sefunction() {

  setTimeout(() => {

    htmlInput = "Given htmlInput";

    initialisation2(); // logs "Given htmlInput"

  }, 1000);

  initialisation2(); // logs "undefined"

}

function initialisation2() {

  console.log(htmlInput);

}