función fuera JS variable no disponible

E Lon Máscara:

Tengo un problema pequeño con una variable en mi código.

Estoy teniendo una variable que consigue declaired fuera de la función, pero luego no se puede acceder después de ella.

Así que primero se introduce un archivo que se combina con este código:

input.addEventListener("change", sefunction);

Ahora este archivo (que es un archivo HTML) debe conseguir analizado en una cadena:

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

Entonces, para probarlo, quiero console.log el htmlInput:

function initialisation2() {
    console.log(htmlInput);                //NOT WORKING
}

Ahora lo que sucede: La primera console.logme da el contenido de htmlInput. El segundo y el tercero (en initialisation2()) no lo hacen.

¿Puede alguien decirme por qué? La variable se declara fuera de la primera función por lo que deberán ser llenados disponible en el resto del código. Necesito analizar el HTML archivo de entrada como esto porque quiero ser capaz de acceso cosas como htmlInput.getElementsByTagName('table').

Callum Hart:

La htmlInputvariable se está asignando un valor después de la segunda console.logy initialisation2se llaman. Esto se debe a que FileReaderes asíncrona, por lo que htmlInputserá undefinedhasta que el archivo se ha leído.

Al mover la initialisation2llamada a la loaddevolución de llamada va a resolver esto:

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

Podemos replicar lo que está sucediendo utilizando un tiempo de espera que imita la asynchronousity del lector de archivos:

var htmlInput;

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

  initialisation2(); // logs "undefined"
}

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