在所有 .each() 发起的 AJAX 请求完成后运行代码答案

【问题标题】：Run code after all .each()-originating AJAX requests have finished在所有 .each() 发起的 AJAX 请求完成后运行代码
【发布时间】：2012-01-07 10:52:04
【问题描述】：

我想在处理完所有元素的 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);

【问题讨论】：

那是因为那些 AJAX 调用是异步的，但 alert() 会立即运行。
您是否尝试将alert(test); 放在success: 中？
是的，但我想在处理完所有元素后处理结果
像test 一样记录所有结果，当它等于$('#div :input').length 时，运行该代码/函数。此外，使用$.data() 代替全局变量是一种更好的做法。

标签： jquery variables global

【解决方案1】：

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

【讨论】：

【解决方案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/

【讨论】：

【解决方案3】：

当到达alert() 时，ajax 调用还没有完成，success 回调还没有被调用。所以test还是有它的初始值。

【讨论】：

我知道，但我尝试了任何方法，有什么提示可以解决这个问题吗？