Javascript for-loop wiederholende letzte Iteration

Question

Ich versuche Crop-Resize n ein Bild auf Client-Browser mit JS anzuzeigen. Ich bin dazu in der Lage, außer dass meine Textschleife falsch ist. Sie können auf dem Bild unten sehen, dass es die letzte Iteration wiederholt. Meine Bildschleife funktioniert jedoch gut. Hint - Der erste Dateiname sollte black.jpg sein.

Am nicht in der Lage, das Problem zu lösen, nachdem mehrere Stunden versucht zu haben. Unten ist eine getrimmte Version des Codes angegeben. Bei Bedarf ist hier das complete version des Skripts. Bitte helfen Sie, ich lerne immer noch.

HTML

<input type="file" id="input" onchange="prevCrop()" multiple> 
<ul id="listWrapper"></ul> 

JAVASCRIPT

function prevCrop() { 
    var files = document.querySelector('input[type=file]').files; 

    for (var i = 0; i < files.length; i++) { 
     var file = files[i]; 
     var fileSize = Math.floor(file.size/1024); 
     var info = file.name + " " + fileSize + " KB : iteration number - " + i; 

     var reader = new FileReader(); 
     if (reader != null) { 
     reader.onload = GetThumbnail; 
     reader.readAsDataURL(file); 
     }   
    } 


    function GetThumbnail(e) { 
     var canvas = document.createElement("canvas"); 
     var newImage = new Image(); 
     newImage.src = e.target.result; 
     newImage.onload = cropResize; 

     function cropResize() { 
      canvas.width = 70; 
      canvas.height = 70; 
      ### more codes here that handles image ### 

      var dataURL = canvas.toDataURL("image/jpg"); 
      var thumbList = document.createElement('div'); 
      thumbList.setAttribute('class', 'tlistClass'); 
      var nImg = document.createElement('img'); 
      nImg.src = dataURL;  
      var infoSpan = document.createElement('span');      
      infoSpan.innerHTML = info;   
      var handle = document.getElementById("listWrapper").appendChild(thumbList); 
      handle.appendChild(nImg); 
      handle.appendChild(infoSpan); 
     }    
    } 

} 

Answer 1

Dies, weil die Funktion asynchron onload Rückruf geschieht ausgelöst wird, so dass nach dem Code bereits beendet ist. Zu dieser Zeit hat info die Zeichenfolge, die ihm in der letzten Iteration zugewiesen wurde. Nur dann werden die onload Ereignisse ausgelöst, was zu den verschiedenen Aufrufen von GetThumbnail führt, die alle den gleichen Wert für info sehen.

binden Anstatt den Wert von info an die Callback-Funktion wie folgt aus:

reader.onload = GetThumbnail.bind(null, info); 

... und definieren die entsprechenden Parameter für die es in der GetThumbnail Funktion:

function GetThumbnail(info, e) { 

diese Weise jeder Aufruf dieser Funktion hat den richtigen Wert für info.