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

Question

我有一个绑定(bind)到点击处理程序的按钮——它会根据数组中的项目数量进行一个或多个 AJAX 调用。我用 blockUI jquery plugin在进行 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]);

是异步完成的，因此该方法在循环内触发，但执行会花费更多时间，因此在其余代码已完成。

在这篇文章中找到了一种处理这种行为的好方法: Asynchronous method queue chaining in JavaScript