javascript - 在 AJAX/Javascript 中调用长时间运行的进程时如何更新 UI？

Question

我有多个进程需要连续调用(我正在使用同步 AJAX 调用)。我想在完成后显示长时间运行的进程的状态，然后继续下一个进程。这是我编写的示例代码。

    var counter = 0;
function runProcess(input, output) {
    doWork();
    doWork();
    doWork();
};
function doWork() {
    counter++;
    document.getElementById('<%=this.progressMonitor.ClientID%>').innerHTML += "Running " + counter;

    // some lengthy calculations
    for (var i = 0; i < 1000000; i++) {
        var foo = Math.random();
    }
    setTimeout(updateStatus, 1000);
};
function updateStatus() {
    document.getElementById('<%=this.progressMonitor.ClientID%>').innerHTML += "Done " + counter;
}

当我运行它时，我得到以下响应:

运行 1 运行 2 运行 3 完成 3 完成 3 完成 3

我想得到

运行 1 完成 1 运行 2 完成 2 运行 3 完成 3

如果我在 updateStatus 函数中插入一个 alert() 语句，那么我会得到我想要的响应/执行顺序。浏览器是否为 3 个函数调用创建 3 个线程并异步执行它们？

我怎样才能连续运行它？ setTimeout 是否正确执行？提前感谢您的帮助。

Answer 1

听起来您想对 AJAX 调用进行排队。 jQuery 提供了一个很好的队列函数，所以你可以确保一系列函数被一个接一个地调用。 Mootools 和其他框架提供类似的功能。

这是我的 fiddle 中的代码 展示了如何操作。

var queueElement = $("#output");
var counter = 0;

function doWork(next) {
    queueElement.append("Starting " + counter + "<br/>");
    counter++;
    $.ajax('/echo/json/').always(function() {
        queueElement.append("Ending " + counter + "<br/>");
        next();
    });
}

queueElement.queue('workQueue', doWork);
queueElement.queue('workQueue', doWork);
queueElement.queue('workQueue', doWork);
queueElement.dequeue('workQueue'); // start the work queue