將元素添加到陣列中的嵌套範圍

Question

我覺得自己很笨，但我不覺得有什麼問題在這裏

var images = []; 

angular.forEach($scope.flow.images.files, function (flowFile, i) { 
    var fileReader = new FileReader(); 
    fileReader.onload = function (event) { 
     var uri = event.target.result; 
     images.push(uri); 
     console.log(images.length); // First iteration length = 1, second iteration length = 2 
    }; 

    console.log(images.length); // Always shows 0 
    fileReader.readAsDataURL(flowFile.file); 

}); 

誰能幫我明白了嗎？

Answer 1

這是關於JavaScript的異步性質。 images.length發生日誌之前fileReader.onload函數被觸發儘管它之後依次發生，因此images數組的內容不一致。

爲了規避此行爲和avoid callback hell，請在JavaScript中查看此tutorial on Promises。