JS FileReader onloadend scheint eine Umleitung zu verursachen

Question

Ich arbeite an einem Frontend-intensiven Projekt, das CSVs über einen neuen FileReader liest und analysiert. Hier ist der säumige Codeblock, von dem, was ich dank Dev-Tools vermutet haben:

function parseCSVs() { 
    let fileUpload = document.getElementById('file-input') 

    if(fileUpload.files.length) { 
    let fileReader = new FileReader(), 
     varLabels = varAssigner.querySelectorAll('input'); 

    function _addUntilFull(i) { 
     fileReader.readAsText(fileUpload.files[i]) 
     fileReader.onloadend = function() { 
     addVar(varLabels[i].value, csvToMatrix(fileReader.result)) 

     if(varList.length == fileUpload.files.length) { 
      return; 
     } else { 
      _addUntilFull(i + 1) 
     } 
     } 
    } 
    _addUntilFull(0) 
    } 

Preserved console messages

Nach Protokolle bewahren (siehe Abbildung oben), entdeckte ich, dass die Konsole alle richtigen Nachrichten wurde Protokollierung (führt mich zu der Annahme, dass meine Funktionen alle ordnungsgemäß funktionieren), aber das Dokument würde die Dateiübergabe und den Parsing-Abschluss löschen/neu laden, und die Protokolle würden sagen: "Navigieren zu Datei: /// etc/etc", daher kommt dieses Problem höchstwahrscheinlich durch unerwartetes Verhalten seitens der FileReader- oder Eingabeobjekte [type = "file"]. Ich kann nichts in MDNs Dokumentation von FileReader oder anderen Online-Foren finden, die erklären würden, warum dies geschieht. Bitte helfen Sie! Das war so ein Kopfweh- Danke!

Answer 1

Ich habe tatsächlich herausgefunden, was das Problem war, und es hatte nichts mit dem obigen Codeblock zu tun ... Der Knopf, der die Funktion parseCSVs ausgelöst hat, war in einem Formular, und obwohl ich die "Aktion" und gelöscht hatte "Methode" -Attribute des Formulars, und die Schaltfläche hatte keinen "Typ", die Schaltfläche ausgelöst eine Umleitung nach der Onclick-Funktion ausgelöst. Ich führte auch einen Test für ein Formular und einen Button ohne Attribute in einer HTML-Datei durch und entdeckte das gleiche Verhalten wie oben. Schalten Sie das Element zu einem verhindert die Umleitung und behob das Problem :)