等待所有的ajax请求都完成

Question

我需要等到我所有的ajax函数都完成后，再继续执行。

我的特殊情况是，在提交表单之前，我需要翻译表单中的某些字段。我通过ajax调用将其转换为外部站点。根据表单中的某些值，我需要进行更多或更少的翻译。完成所有翻译后（如果有），我必须使用ajax验证表单，如果表单有效，则提交。

这是我的方法：
首先，我有一个函数发送ajax调用并对接收到的数据进行处理：

function translate(...) {
    $("#ajaxCounter").val(parseInt($("#ajaxCounter").val()) + 1);
    $.ajax({
        ...
        success:function(data) {
            ...
            $("#ajacCounter").val(parseInt($("#ajaxCounter").val()) - 1);
        }
    });

然后，当要提交表单时，我将执行以下代码：

$("#form").submit(function() {
    translatable_fields.each(function() {
        translate(...);
    });
    while (parseInt($("#ajaxCounter").val()) > 0) { null; }
    if (!(this).hasClass('ready')) {
        $.ajax({
            //validation
            success: function(data) {
                if (data['isValid']) {
                    $("#form").addClass('ready');
                    $("#form").submit();
                }
            }
        });
    }
    return true;
});

问题在于whilesubmit函数中的循环永远不会结束。

如果我执行的代码没有while循环，我可以看到ajaxCounter输入在转换函数开始时增加而在转换函数结束时减少。

Answer 1

您可以使用调用deferred返回的对象以更加整洁的方式实现此目的$.ajax。首先，您应该获得translate()返回以下内容的函数deferred：

function translate(...){
    return $.ajax({
        // settings...
    });
});

然后，您可以将所有这些承诺放入一个数组中：

var requests = [];
translatable_fields.each(function(){
    requests.push(translate(...));
});

然后，您可以apply将该数组添加到$.when：

$.when.apply($, requests).done(function(schemas) {
     console.log("All requests complete");
    // do something...
});