javascript - HTML5 文件 API : onload too slow

Question

我是 JavaScript 和 jQuery 的新手，谷歌没有找到答案。我正在写一个在线电子书阅读器。这是图书馆的代码，用户可以在其中输入多个 epub 文件，相关信息(如作者)应显示在表格中。为此，我需要提取 ePub 文件。 jsZip library工作完美。内容必须显示在动态创建的表格中(因为我不知道文件的数量)。

问题是 for 循环会很快并创建所有单元格，其中只有名称和文件大小，并且在 for 循环完成后，FileReader 的 onload 执行并将所有内容添加到最后一个单元格中。在此代码中，警报(“A”)发生的次数与警报(“B”)发生之前输入的文件一样多。有什么方法可以让循环等到 FileReader 的加载完成？

function handleFileSelect(evt) {
var files = evt.target.files;
var rows = Math.ceil(files.length/3);
var a = 0;
var root = document.getElementById('mainTable');
var tab=document.createElement('table');
tab.style.textAlign = "center";
var row, cell;
var tbo=document.createElement('tbody');
for(var i  = 0; i != rows; i++)
{
  row=document.createElement('tr');
  for(var j = 0; (j < 3);j++)
  {
   cell = document.createElement('td');
   cell.height = "300px";
   cell.width = "300px"
   if(a <indexes.length)
   {
        var f = files[a];
        var str = f.name;
        str = str.substring(0, str.length - 5);
        str = "File Name: " + str;
        cell.appendChild(document.createTextNode(str));
        cell.appendChild(document.createElement('br'));
        str = "File Size: " + Math.round(f.size/1024) + " KB";
        cell.appendChild(document.createTextNode(str));
        cell.appendChild(document.createElement('br'));
        var reader = new FileReader();
        reader.onload = (function(theFile) 
        {
          return function(e) 
          {
              alert("B");
              var zip = new JSZip(e.target.result);
              $.each(zip.files, function (index, zipEntry) 
              {
                  cell.appendChild(document.createTextNode(zipEntry.name));
                  cell.appendChild(document.createElement('br'));
                  //row.appendChild(cell);
              });
          }
        })(f);
        reader.readAsArrayBuffer(f);
        alert("A");
        a++;
    }
    row.appendChild(cell);
  }
  tbo.appendChild(row);
}
tab.appendChild(tbo);
root.appendChild(tab);              
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);

Answer 1

您的问题是您的 onload 处理程序中使用的变量 cell 将引用在外循环中分配给 cell 的最后一个值。您可以通过将文件处理放在一个单独的函数中来解决这个问题，该函数将创建它自己的范围。

function read_zip_file(f, cell) {
    var reader = new FileReader();
    reader.onload = (function(theFile) 
    {
      return function(e) 
      {
          alert("B");
          var zip = new JSZip(e.target.result);
          $.each(zip.files, function (index, zipEntry) 
          {
              cell.appendChild(document.createTextNode(zipEntry.name));
              cell.appendChild(document.createElement('br'));
              //row.appendChild(cell);
          });
      }
    })(f);
    reader.readAsArrayBuffer(f);
}

然后在外循环中你可以调用:

read_zip_file(f, cell);