在所有源自.each（）的AJAX请求完成后运行代码

Question

我想在所有元素的AJAX请求都处理完之后再处理结果。 但是，我的test变量没有警告正确的值。 我怎样才能做到这一点？

var test = 0;

$('#div :input').each(function() {
    var loadUrl = "path_to/ajax.php?label="+value;  
    $.ajax({
        type: "GET",
        url: loadUrl,
        success: function(msg) {
            if(msg == 1) {
                test++;
            }
            else if(msg == 2) {
                test++;
            }
        }
    });                     
});

alert(test);

Answer 1

当到达alert()时，ajax调用尚未完成，并且尚未调用success回调。 因此test仍然具有其初始值。

Answer 2

由于您要执行的操作是在完成所有GET请求后执行某项操作，因此您应该跟踪所有请求然后执行某项操作。

请注意，如果您尝试联系可能无法返回的资源，则可能要进行超时检查和/或使用complete处理程序，它将在所有其他处理程序（包括有错误，超时或没什么（意思是， success可能永远不会运行，并且您的代码可能永远不会被告知完成）。

重要！ 打开Firefox中的Chrome控制台或Firebug以查看输出。

<div id="div">
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
</div>

console.clear();
var c_inputs = 0;
var $div = $('#div');
var $inputs = $div.find(':input');
$div.data('data-inputs',$inputs.length);
$div.data('data-messages',0);
console.log('Number of inputs: ' + $div.data('data-inputs') + ' Number of messages: ' + $div.data('data-messages'));

$inputs.each(function() {
    var loadUrl = "#";  
    $.ajax({
        type: "GET",
        url: loadUrl,
        success: function(msg) {
            var $div = $('#div');
            var count = parseInt($div.data('data-messages'));
            var inputs = parseInt($div.data('data-inputs'));
            count++;
            $div.data('data-messages',count);
            console.log('Current message count: ' + count + ' == Total Inputs: ' + inputs);
            if (count == inputs) {
                finishedInputs();
            }
        }
    });                     
});

function finishedInputs() {
    console.log('Finished! (' +
        $('#div').data('data-messages') +
        ' of ' +
        $('#div').data('data-inputs') +
        ')'
    );
}

http://jsfiddle.net/msJgT/

Answer 3

var test = 0;
var semaphore = 0;

$('#div :input').each(function() {
    var loadUrl = "path_to/ajax.php?label="+value;  
    semaphore++;
    $.ajax({
        type: "GET",
        url: loadUrl,
        success: function(msg) {
            if(msg == 1) {
                test++;
            }
            else if(msg == 2) {
                test++;
            }
        },
        complete: function() {
            semaphore--;
            if (semaphore == 0) { alert(test); }
        }
    });                     
});