fileWriter 在 javascript 中的工作原理

Question

我在我的项目中使用 HTML5 的文件系统功能。并尝试使用 for 循环将文本追加到文件连续。但实际上它只会影响最后一次写入的一次写入，即使我得到5“写入完成。”（这应该意味着它成功写入5次）。这是我的代码：

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
var fs;

function initFS() {
    console.log("init filesystem")
    window.requestFileSystem(window.TEMPORARY, 1024 * 1024, function (filesystem) {
        fs = filesystem;
        console.log(fs);
    }, errorHandler);
}

function errorHandler(e) {
    var msg = '';
    switch (e.code) {
        ...
    };
    console.log('Error: ' + msg);
}

function receiveFile(cont) {
    fs.root.getFile('log.txt', {
        create: true
    }, function (fileEntry) {
        // Create a FileWriter object for our FileEntry (log.txt).
        fileEntry.createWriter(function (fileWriter) {
            fileWriter.seek(fileWriter.length);
            fileWriter.onwriteend = function (e) {
                console.log('Write completed.');
            };
            fileWriter.onerror = function (e) {
                console.log('Write failed: ' + e.toString());
            };
            // Create a new Blob and write it to log.txt.
            var bb = new Blob([cont]);
            fileWriter.write(bb);
        }, errorHandler);
    }, errorHandler);
}

function foo() {
    for (i = 0; i < 5; i++) {
        setTimeout(function () { // // it works, BTW: Why it didn't write the num in ascending order as expected
            (function (x) {
                receiveFile(x);
            })(i)
        }, i * 1000);
        //receiveFile(i); // didn't work, just write once
    }
}

window.addEventListener("load", initFS, false);

您可以在jsfiddle 上试用它并从以下链接获取结果：filesystem:http://fiddle.jshell.net:0/temporary/

我在想是不是写得这么快，不能及时保存。所以我尝试了 'setTimeout' ，它可以正常工作并完全编写。

有人知道为什么吗？我怎样才能实现我想要的？如果您能帮助我，请先感谢。

Answer 1

fileWriter.write() 是一个异步操作。你基本上在这里创造了一场比赛。 没有超时会发生什么（如果写入速度很慢，甚至超时）：

• receiveFile(0)
• fileWriter.seek(fileWriter.length /* == 0 */)
• queue write(0)
• receiveFile(1)
• fileWriter.seek(fileWriter.length /* == 0 */) - 是的，仍然是 0，因为还没有执行实际的写入操作。
• queue write(1)
• ...
• actual async write(0)
• actual async write(1)
• ...

接下来发生的事情是实现细节和错误。 总而言之：在进行另一次写入之前，始终等待写入操作完成。

当前的规范草案实际上disallows 在readyState === WRITING 时调用seek/write，并声明readyState 应设置为WRITING as soon as the write function gets called。 Chrome 还没有实现这个版本的规范，或者仍然有问题，或者如果会赶上你的比赛并在第二次调用 InvalidStateError 时抛出 InvalidStateError（无超时版本）。