javascript - 等到所有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;
});

问题是提交函数中的 while 循环永远不会结束。

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

Answer 1

您可以使用从 $.ajax 调用返回的 deferred 对象以更简洁的方式实现这一点。首先，您应该获取 translate() 函数以返回 deferred:

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

然后您可以将所有这些 promise 放入一个数组中:

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

然后你可以应用那个数组到$.when:

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