Question

所以基本上是发生了什么：
1）按钮单击
2）返回json arrya的外部请求 3）循环遍历数组并将每个元素保存在文件（客户端）中

问题是console.log(fileName)只打印最后一个元素。所以我得到最后一个文件名的n倍。

有没有办法欺骗window.webkitRequestFileSystem做我需要的事情，或者有一种解决方法。

document.getElementById("reload-files").onclick = function() {
    reloadFiles(localStorage["user_mail"]);
}

function reloadFiles (email) {
  var files = [];
  var xhr    = new XMLHttpRequest();

  var url = "...url...&email="+escape(email);
  xhr.open("GET", url, true);

  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      resp = JSON.parse(xhr.responseText);

      for (var i = resp.length - 1; i >= 0; i--) {
        fileName = resp[i].name;
        fileData  = resp[i].data;
        files.push(fileName);
        // save file
        window.webkitRequestFileSystem(window.PERSISTENT, resp[i].data.length, writeToFileStorage, errorHandler);
      };
      localStorage["files"] = JSON.stringify(files);
    }
  }
  xhr.send();
}

function writeToFileStorage(fs) {
  fs.root.getFile(fileName, {create: true}, function(fileEntry) {

    // Create a FileWriter object for our FileEntry (log.txt).
    fileEntry.createWriter(function(fileWriter) {

      fileWriter.onwriteend = function(e) {
        console.log(fileName);
      };

      var blob = new Blob([fileData], {type: 'application/javascript'});

      fileWriter.write(blob);

    }, errorHandler);

  }, errorHandler);
}

Answer 1

这里的问题是webkitRequestFileSystem没有立即调用其回调函数。相反，它会在当前代码执行完毕后稍后触发。因此，您生成了writeToFileStorage次执行的积压，所有这些都会在fileName循环完成后留下最后的for值。

您可以使用bind解决此问题，{{3}}将使用固定参数生成回调函数的新副本：

window.webkitRequestFileSystem(window.PERSISTENT,
                               resp[i].data.length,
                               writeToFileStorage.bind(window, fileName, fileData),
                               errorHandler);

然后将这些正式参数添加到回调定义中，并使fs成为最终参数：

function writeToFileStorage(fileName, fileData, fs) {
    ...
}

那就是说，我质疑重复请求文件系统访问的效率。您可以将所有data.length金额相加，并对webkitRequestFileSystem进行一次调用。你可以在回调中更多地进行for循环，并且只调用一次回调。

谷歌浏览器扩展程序在客户端保存文件

1 个答案: