javascript for循環重復上一次迭代

Question

我正在嘗試裁剪大小n使用JS在客戶端瀏覽器上顯示圖像。 我可以這樣做，但我的文本循環是錯誤的。 您可以在下面的圖像中看到它正在重復上一次迭代。 我的圖像循環工作正常。 Hint -第一個文件名文本應該是black.jpg 。

嘗試了幾個小時后無法解決問題。 下面給出的是代碼的精簡版本。 如果需要，這里是腳本的完整版本 。 請幫助，我還在學習。

的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

發生這種情況是因為onload回調函數是異步觸發的，因此代碼已結束。 那時info具有在上一次迭代中分配給它的字符串。 只有這樣，才會觸發onload事件，從而導致對GetThumbnail的不同調用，所有調用都將看到相同的info值。

而是將info的值綁定到回調函數，如下所示：

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

...並在GetThumbnail函數中為其定義相應的參數：

function GetThumbnail(info, e) {

這樣，該函數的每次調用都將為info賦予適當的值。