Почему не удается получить доступ к элементам массива? (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]); 

Это результат выходов console.log() в браузере Google Chrome. Как вы видите, scope.targets показывает, что существует элемент типа string. Однако scope.targets [0] не определен. Почему это происходит? Есть ли другой способ доступа к элементу?

---

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

---

Вот решение. Спасибо вам, 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

Код выполняющийся асинхронно. Смотрите комментарии ниже

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