JS variable non disponible fonction à l'extérieur

E Lon Masque:

J'ai un petit problème avec une variable dans mon code.

Je vais avoir une variable qui obtient Declaree en dehors de la fonction mais ne peut pas être accessible après.

Alors d'abord vous entrez un fichier qui est combiné avec ce code:

input.addEventListener("change", sefunction);

Maintenant, ce fichier (qui est un fichier HTML) doit s'analysable dans une chaîne:

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

Ensuite, pour le tester, je veux console.log le htmlInput:

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

Maintenant , ce qui se passe: Le premier console.logme donne le contenu htmlInput. Le deuxième et le troisième (en initialisation2()) ne le font pas.

Quelqu'un peut -il me dire pourquoi? La variable est déclarée en dehors de la fonction première de sorte sould soit disponible il dans le reste du code. Je dois analyser le HTML-entrée-fichier comme celui - ci parce que je veux être en mesure de choses d'accès comme htmlInput.getElementsByTagName('table').

Callum Hart:

La htmlInputvariable est affectée une valeur après la seconde console.loget initialisation2sont appelés. En effet , FileReaderest asynchrone, htmlInputsera undefinedjusqu'à ce que le fichier a été lu.

Déplacement de l' initialisation2appel dans le loadrappel résoudra ceci:

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

Nous pouvons reproduire ce qui se passe en utilisant un délai d'attente qui imite la asynchronousity du lecteur de fichiers:

var htmlInput;

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

  initialisation2(); // logs "undefined"
}

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