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

我有多个需要串行调用的进程(我正在使用同步 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运行3Done 3Done 3Done 3

我想得到

运行1Done 1运行2Done 2运行3Done 3

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

我怎么能连续运行这个？ setTimeout是否正确实现？感谢您的帮助.

解决方法

听起来你想要排队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.dequeue('workQueue'); // start the work queue