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-input-file 因为我希望能够访问像 htmlInput.getElementsByTagName('table').

这样的东西

Answer 1

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

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

reader.addEventListener("load", function(e) {
  inputFile = e.target.result;
  htmlInput = new DOMParser().parseFromString(inputFile, "text/html").documentElement;
  initialisation2();
});

我们可以使用模拟文件异步性的超时来复制正在发生的事情 reader:

var htmlInput;

function sefunction() {
  setTimeout(() => {
    htmlInput = "Given htmlInput";
    initialisation2(); // logs "Given htmlInput"
  }, 1000);

  initialisation2(); // logs "undefined"
}

function initialisation2() {
  console.log(htmlInput);
}

JS 变量在函数外部不可用

JS Variable not available outside function

javascript

html

function

variables

domparser