Question

我正在尝试访问我的变量，但它给了我一个空数组。

示例：

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方法未被调用，您的代码流继续而不等待触发，因此在达到console.log(data)时，数据尚未填充。

JavaScript是一种单线程语言。这意味着调用长时间运行的进程会阻止所有执行，直到该进程完成。 UI元素没有响应，动画暂停，应用程序中没有其他代码可以运行。该问题的解决方案是尽可能避免同步执行。

执行此操作的一种方法是让函数稍后执行，就像事件处理程序一样，在另一个调用引发事件之后调用它们。回调函数是另一种异步处理，因为它们会回调启动进程的代码。

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

在foreach Jquery外部访问变量

3 个答案: