Выполните код после всех .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

Поскольку вы пытаетесь что-то сделать, когда все запросы GET выполнены, вы должны отследить все запросы и затем что-то сделать.

Обратите внимание: если вы пытаетесь связаться с ресурсом, который может не вернуться, вы можете установить проверку тайм-аута и / или использовать вместо этого обработчик complete, который будет запускаться после всех остальных обработчики, в том числе при наличии ошибки, тайм-аута или чего-то еще (имеется в виду, что success может никогда не запуститься, а вашему коду никогда не будет приказано завершиться).

Внимание! Для просмотра выходных данных откройте Chrome Console или Firebug в Firefox.

<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 2

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); }
        }
    });                     
});

Answer 3

Когда достигается alert(), вызов ajax еще не завершен, а обратный вызов success еще не был вызван.Поэтому test все еще имеет свое начальное значение.