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);}