小编典典

等待所有的ajax请求都完成

ajax

我需要等到我所有的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输入在转换函数开始时增加而在转换函数结束时减少。


阅读 369

收藏
2020-07-26

共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...
});
2020-07-26