Question

我有一些javascript代码，在点击链接时会执行。

代码执行后我想显示警告，但是在早期代码完成之前显示警报

document.querySelector('.btn-primary').addEventListener('click', function(evt) {

    var loops = 10;
    var chunkLength = Math.ceil(file.size / loops);
    var start = 0;
    var stop = chunkLength;

    for (var i = 0; i < loops; i++) {
        var blob = file.slice(start, stop);
        readText(blob);
        start = stop;
        stop += chunkLength;
    }
    alert('entire file loaded');
    print();
}, false);

更新

我知道因为readText方法会更新进度条，这会在警报弹出后发生，它不是ajax调用只是本地方法（这是异步的......）

最终，我希望用保存文件的调用来替换警报但是如果文件内容尚未生成则没有用，因为我只保存一个空文件。

Answer 1

您提到readText是一种异步方法。这就是alert在readText执行完之前显示的原因。 for循环将遍历所有迭代，到时readText的调用尚未完成。在for之后执行的下一个语句是alert，这就是您所看到的。

如果readText提供回调函数，则必须使用：

var counter = 0;
for (var i = 0; i < loops; i++) {
    var blob = file.slice(start, stop);
    readText(blob, function() {
        counter++;
        if(counter === loops) {
            alert("entire file loaded");
        }
    });
    start = stop;
    stop += chunkLength;
}

但这并不保证操作顺序。完全可能的是，稍后迭代的调用在来自先前迭代的调用之前完成。

如果readText没有回调参数，您可以修改该函数的来源，则必须执行以下操作：

function readText(blob, callback) {
    ...

    if(typeof callback === "function") {
        callback();
    }
}

Answer 2

在这种情况下，您需要扩展readText以接受回调函数：

function readText(blob, callback) {
    var reader = new FileReader();
    reader.onload = callback;
    // whatever else your function does to load the file
}

然后你这样调用它：

readText(blob, function() {
    alert('entire file loaded');
});

当然，如果readText本身将其异步工作委托给其他地方，那么你也必须在那里传递回调。

如果实际的异步函数不接受回调参数，那么您将需要检查其向调用者发出完整性信号的另一种方式。它可能引发事件。但这完全取决于readText的实施方式。

为什么在早期代码执行完之前会发出警报？

更新

2 个答案: