FileReader:读取多个项目;如何在读取最后一个回调时设置回调

FileReader: reading multiple items; how to set a callback upon reading the last one?

本文关键字：读取 回调 最后一个 设置 项目 FileReader      更新时间：2023-09-26

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

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

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

您可以制作某种计数器，并在onload函数中检查它（您可能也希望在oneror中拥有它）。

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

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

相关文章：