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

毕竟运行代码.each（） - 发起的AJAX请求已经完成

3 个答案: