为什么我的 javascript/jquery 没有按顺序执行？

Question

我有一个与单击处理程序绑定的按钮——它会进行一个或多个 AJAX 调用，具体取决于数组中有多少项。我使用 blockUI jquery 插件 在进行 ajax 调用时显示一条消息，然后我显示结果，并通过调用 $.unblockUI(); 删除 blockUI 消息。

问题：由于某种原因，无论我希望 ajaxCall 函数执行多少次，在第一个 ajax 调用完成后，即使循环仍然继续执行，消息也会被删除，并且结果显示正确地位于#results div 中。我希望在删除消息传递之前完成完整数量的循环迭代，但它似乎没有按顺序执行。这是有问题的代码：

$("#myButton").live("click", function(){
    $.blockUI({ message: '<img src="new_loader.gif" /><h2>Getting Config Files</h2><small>Please be patient.</small>',
            css: { 
            border: 'none', 
            padding: '15px', 
            backgroundColor: '#FFF', 
            '-webkit-border-radius': '10px', 
            '-moz-border-radius': '10px',  
            color: '#000' 
            } 
        }); 

    for (var i=0; i< myArray.length; i++)
        {
         ajaxCall(myArray[i]);
        }
    $("#results").show('slow');
    $.unblockUI();  
    return false;
});

是否有解释为什么即使循环尚未完成，循环后的代码也会执行？任何帮助表示赞赏！谢谢。

Answer 1

 ajaxCall(myArray[i]);

是异步完成的，因此该方法在循环内触发，但执行将花费更多时间，因此在其余部分之后结束代码完成。

在这篇文章中找到了处理这种行为的一个好方法：异步方法队列JavaScript 中的链接

Answer 2

无论 ajaxCall() 做什么，如果它异步创建 XMLHttpRequest，那么这就是正确的行为。 Ajax 请求默认是非阻塞的，我想这就是为什么循环后的代码立即执行的原因。

我能想到的解决此问题的一种可能方法是创建一个计数器变量，该变量在每次调用 ajaxCall() 时都会增加，并在每个完整处理程序中减少（XHR 就绪状态） 4）。当该计数器变为零时，您应该在循环后执行代码。

function increase() {      // goes into your `ajaxCall()` or `beforeSend` callback
    mynamespace.requests++;
}

function decrease() {      // goes into your `complete` callbacks
    if(--mynamespace.requests) {
        $("#results").show('slow');
        $.unblockUI();  
    }
}

Answer 3

我猜 ajaxCall 是异步的？这将导致代码不会在循环中阻塞，本质上是快速完成循环，然后继续进行。

您可以做的是提供一个带有计数器的回调函数来检查所有 ajax 调用是否已完成。

var count = arr.length - 1;
for(var i = 0; i < arr.length; i++)
{
    ajaxCall(arr[i], function () {
        if(--count == 0)
        {
            /* All AJAX calls complete, continue execution */
        }
    });
}