为什么不能访问数组元素?(javascript) [英] Why can't the array elements be accessed? (javascript)

问题描述

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

For some reason when elements are pushed to an array in the FileReader.onload event function, the elements of that array are later inaccessible. Consider the following code:

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]未定义.为什么会这样呢?还有另一种访问元素的方法吗?

This is the result of the console.log() outputs in Google Chrome Browser. As you can see scope.targets reveals that there's an element of type string. However, scope.targets[0] is undefined. Why is this happening? Is there another way to access the element?

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

**************************UPDATE*************************************

这是一个解决方案.谢谢Ashwin Balamohan和nnnnn的回答，这使我找到了解决方案.我在这里找到了我想要的东西

Here's a solution. Thank You Ashwin Balamohan and nnnnn for your answers, it led me to find a solution. I found what I was looking for here 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]);
 }

推荐答案

代码正在异步执行.查看下面的评论

The code is executing asynchronously. See comments below

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 :

What you can do is to modify your reader.onload function so that it performs the console.log in the callback:

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);
        };
 }

这篇关于为什么不能访问数组元素?(javascript)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！