为什么不能访问数组元素？ （javascript）[重复]

Question

由于某种原因，当元素被推送到 FileReader.onload 事件函数中的数组时，该数组的元素稍后将无法访问。考虑以下代码：

scope.targets = [];

for(var i = 0; i < files.length; i++){
        var reader = new FileReader();
        reader.readAsDataURL(files[i]);

        reader.onload = function(e){
              scope.targets.push(e.target.result);
        };
 }

 console.log(scope.targets);
 console.log(scope.targets[0]);

这是 Google Chrome 浏览器中 console.log() 输出的结果。 正如您所看到的，scope.targets 显示有一个字符串类型的元素。 但是，scope.targets[0] 是未定义的。为什么会这样？还有其他方法可以访问该元素吗？

---

******************************更新************************ *****************

---

这里有一个解决方案。谢谢 Ashwin Balamohan 和 nnnnn 的回答，这让我找到了解决方案。我在这里找到了我想要的东西How to implement Progress Bar and Callbacks with async nature of the FileReader

解决办法是：

scope.targets = [];

for(var i = 0; i < files.length; i++){
        var reader = new FileReader();
        reader.readAsDataURL(files[i]);

        reader.onload = function(e){
              scope.targets.push(e.target.result);
              if(i == files.length){
                    callback();
              }
        };
 }

 var callback = function(){
     console.log("scope.targets:");
     console.log(scope.targets);
     console.log("scope.targets[0]:");
     console.log(scope.targets[0]);
 }

Answer 1

你可以试试这个

scope.targets = {};

for(var i = 0; i < files.length; i++){
        var reader = new FileReader();
        reader.readAsDataURL(files[i]);

        reader.onload = function(e){
              scope.targets[i] = (e.target.result);
        };
 }

console.log(scope.targets);
console.log(scope.targets[0]);

Answer 2

代码正在异步执行。见下面的cmets

scope.targets = [];

for(var i = 0; i < files.length; i++){
        var reader = new FileReader();
        reader.readAsDataURL(files[i]);

        // below is an asynchronous call
        reader.onload = function(e){
              scope.targets.push(e.target.result);
        };
 }

 // the asynchronous calls above may or may not be complete by the time you get here
 console.log(scope.targets);
 console.log(scope.targets[0]);

您可以做的是修改您的reader.onload 函数，使其在回调中执行console.log：

scope.targets = [];

for(var i = 0; i < files.length; i++){
        var reader = new FileReader();
        reader.readAsDataURL(files[i]);

        // below is an asynchronous call
        reader.onload = function(e){
              scope.targets.push(e.target.result);
              // log out the array here, instead
              console.log(scope.targets);
        };
 }