Question

以下是我的代码段，它从指定的路径中读取文件

for (var i in e.target.files) {
    var reader = new FileReader();
    reader.onload = function (e) {
        alert("File loaded successfully");
        var output = e.target.result;
        //             console.log("output: "+output);
    }

reader.log是asyncronous函数，我想要的是等到reader.load事件被触发然后转移到下一次迭代。

我也通过无限循环强制停止此操作，但我的浏览器崩溃了。我也尝试了settimeout和setinterval方法，但都是徒劳的。我只是停下来直到reader.load事件触发，然后转到下一次迭代。

Answer 1

JavaScript构建为异步。如果低级开发人员认为某些功能需要异步，那么你无能为力，实际上你不应该做。可能需要一些时间，用户会看到他的浏览器（或其他运行时环境）被绞死。

Answer 2

你应该重构代码，所以你不要等待，但是为每个异步事件激活一个回调，这会增加一个计数器，并再次执行该功能。类似的东西：

var files = [],
    fileCount = 0,
    currentFile = 0;
for (var i in e.target.files) {
  if (e.target.files.hasOwnProperty(i)) {
    fileCount++;
  }
}

function allLoaded() {
  // process data.
}

function loadHandler(loadEvent) {
  files.push(loadEvent.target);
  loadNext();
}

(function loadNext() {
  if (currentFile < fileCount) {
    currentFile++;
    var reader = new FileReader();
    reader.onload = loadHandler;
  } else {
    allLoaded();
  }
})();

Answer 3

假设您的代码段缺少类似于reader.log(i)的调用，解决方案如下：

var currentItemIndex = 0;

if (e.target.files.length > currentItemIndex) {
    readNext(e.target.files[currentItemIndex]);
}
else {
    endOfWait();
}

function readNext(item) {

    currentItemIndex ++;

    var reader = new FileReader();
    reader.onload = function (x) {
        alert("File loaded successfully");
        var output = x.target.result;

        if (e.target.files.length > currentItemIndex) {        
            readNext(e.target.files[currentItemIndex]);
        }
        else {
            endOfWait();
        }
    }

    reader.log(item);
}

function endOfWait() {
    // put code here that executes once the wait is over
}

如何等待异步函数结果？

3 个答案: