javascript - FileReader：读取多个项目；如何在阅读最后一个回调时设置回调？

Question

我正在创建一个“拖放”字段，它可以递归地接受文件和文件夹。这是代码：

function traverseFileTree(item) {
    if (item.isFile) {
        item.file(function(file) {
            var reader = new FileReader();
            reader.onload = function(evt) {
                // do something...
            };
            reader.readAsText(file);
        });
    } else if (item.isDirectory) {
        var dirReader = item.createReader();
        dirReader.readEntries(function(entries) {
            for (var i = 0; i < entries.length; i++) {
                traverseFileTree(entries[i]);
            }
        });
    }
}

var dropZone = document.getElementById("drop_zone");
dropZone.addEventListener("drop", function(evt) {
    var items = event.dataTransfer.items;
    for (var i = 0; i < items.length; i++) {
        var item = items[i].webkitGetAsEntry();
        if (item) {
            traverseFileTree(item);
        }
    }
}, false);

我的问题：在读取最后一个文件时进行回调的最好或最优雅的方式是什么。由于读取是异步的，我不能只依赖范围规则。那么，是使用计数器，还是我在这里错过了一些很酷的方法？谢谢！

Answer 1

您可以制作某种计数器并在onload函数上检查它（您可能也希望将它放在onerror中）。

function CountDown() {
    this.remain = 0;
}
CountDown.prototype.inc = function (x) {
    if (undefined === x) x = 1;
    this.remain += +x;
    return this;
}
CountDown.prototype.done = function () {
    if (0 >= --this.remain) {
        this.remain = 0;
        return true;
    }
    return false;
}

var count = new CountDown().inc(3); // 3 files
// in the onload for each, test
count.done(); // false
count.done(); // false
count.done(); // true
count.done(); // true
count.done(); // true, etc

当然，如果您正确地确定变量的范围，这也可以在您的代码中完成，而无需包装整个对象。