Задает переменную за пределами foreach JQuery

Question

Im пытается получить доступ к моей переменной, но она дает мне пустой массив.

пример:

var data = []; 
$.each(files, function (index, file) { 
    var reader = new FileReader(); 
    reader.onload = handleReaderLoad; 
    reader.readAsDataURL(file); 

    function handleReaderLoad(evt) { 
     data.push({ 
      name: file.name, 
      file: evt.target.result 
     }); 
    } 
}); 

console.log(data) 

На данный момент данных является пустой массив. Когда я помещаю console.log в foreach, он возвращает мои данные. Как я могу вернуться и получить данные, заполненные за пределами foreach?

Вся помощь будет оценена!

веселит

Answer 1

handleReaderLoad будет называться в asynchrounous моды. Вы можете следить за количеством файлов и войти в onload, когда количество файлов завершено

var data = []; 
var fileCount = files.length; 
var currentCount = 0; 
$.each(files, function(index, file) { 
    var reader = new FileReader(); 
    reader.onload = handleReaderLoad; 
    reader.readAsDataURL(file); 

    function handleReaderLoad(evt) { 
     data.push({ 
      name: file.name, 
      file: evt.target.result 
     }); 
     currentCount++; 
     if (currentCount == fileCount) { 
      console.log(data); 
     } 
    } 
}); 

Answer 2

Я не знаком с FileReader, но совершенно очевидно, что метод readAsDataURL называется асинхронным.

Ваш метод onload не называется inmediatly, поток вашего кода продолжается, не дожидаясь, что это произойдет, так что в точке console.log(data) данные еще не заполнены.

JavaScript - это однопоточный язык. Это означает, что вызов долговременного процесса блокирует все выполнение до тех пор, пока этот процесс не завершится. Элементы пользовательского интерфейса не реагируют, паузы в анимации и никакой другой код в приложении не может выполняться. Решение этой проблемы заключается в том, чтобы избежать синхронного выполнения в максимально возможной степени.

Один из способов сделать это - выполнить функцию позже, как и обработчики событий, которые вызываются после вызова другого события. Функции обратного вызова - это еще один вид асинхронной обработки, поскольку они возвращаются в код, инициировавший этот процесс.

Asynchronous programming in JavaScript

Answer 3

Это может сделать трюк.

var data = []; 
$.each(files, function (index, file) { 
    var reader = new FileReader(); 
    reader.onloadend = handleReaderLoad; 
    reader.readAsDataURL(file); 
}); 

function handleReaderLoad(evt) { 
    data.push({ 
     name: file.name, 
     file: evt.target.result 
    }); 
    if(files.length == data.length) 
     console.log(data); 
}