javascript - jQuery - 当所有 ajax 完成时执行操作

Question

我读过有关 jQuery 的 Deferred对象，但我似乎无法理解它，这是我的问题，我有以下代码:

function preprocess(form) {
    $(form).find(".input input").each(function() {
        var required = $(this).attr("required");
        var checkField = $(this).closest(".inputcontainer").children(".check");
        var errorField = $(this).closest(".inputcontainer").children(".errormessage");
        if (typeof required !== 'undefined') {
            $(checkField).each(function() {
                $(this).css("color", "#FFFF00");
                $(this).html("✘");
            });
            $(errorField).each(function() {
                $(this).css("color", "#FFFF00");
                $(this).html("(Required)");
            });
        }
        else {
            $(checkField).each(function() {
                $(this).css("color", "#FFFF00");
                $(this).html("✔");
            });
            $(errorField).each(function() {
                $(this).css("color", "#000000");
                $(this).html("");
            });
        }
    });

    $(form).find("datalist").each(function() {
        var datalist = $(this);
        callService({
            name: "datalist_" + $(this).attr("id"),
            data: { },
            success: function(json) {
                $(json).each(function() {
                    var html = "";
                    $(this.options).each(function() {
                        html += "<option value='" + this.value + "'>";
                    });
                    $(datalist).append(html);
                });
            }
        });
    });

    $(form).find("select").each(function() {
        var select = $(this);
        callService({
            name: "select_" + $(this).attr("name"),
            data: { },
            success: function(json) {
                $(json).each(function() {
                    var html = "";
                    $(this.options).each(function() {
                        html += "<option value='" + this.id + "'>" + this.value + "</option>";
                    });
                    $(select).append(html);
                });
            }
        });
    });
}

这段代码准备了一个表单以准备呈现给用户，其中涉及 AJAX 调用，我已将其包装在 callService({}); 中。调用，可以看到如下:

• 它检查输入并可能输入 (Required)田野旁边。 (无 AJAX)
• 它从 <datalist> 加载选项和<select>动态地。 (AJAX)

然后我还有以下内容(简化):

function setContent(html, url) {
    html = $.parseHTML(html);
    $(html).filter("form").each(function() {
        preprocess($(this));
    });
    $("#pagemain").html(html);
}

这得到 html来自 AJAX 调用，然后调用 preprocess所有形式并更新 #pagemain .
但是现在数据显示在preprocess之前已经完全完成了。

问题:我该如何做 $("#pagemain").html(html);之后preprocessed还有涉及AJAX的流程，都完成了吗？

Answer 1

尝试:

function preprocess(form) {
    //Your above code is omitted for brevity
    var promises = [];

    $(form).find("datalist").each(function() {
        var defered = $.Deferred();//create a defered object
        promises.push(defered.promise());//store the promise to the list to be resolved later

        var datalist = $(this);
        callService({
            name: "datalist_" + $(this).attr("id"),
            data: { },
            success: function(json) {
                $(json).each(function() {
                    var html = "";
                    $(this.options).each(function() {
                        html += "<option value='" + this.value + "'>";
                    });
                    $(datalist).append(html);
                });
                defered.resolve();//resolve the defered when ajax call has finished
            }
        });
    });

    $(form).find("select").each(function() {
        var defered = $.Deferred();//create a defered object
        promises.push(defered.promise());//store the promise to the list to be resolved later
        var select = $(this);
        callService({
            name: "select_" + $(this).attr("name"),
            data: { },
            success: function(json) {
                $(json).each(function() {
                    var html = "";
                    $(this.options).each(function() {
                        html += "<option value='" + this.id + "'>" + this.value + "</option>";
                    });
                    $(select).append(html);
                });
                defered.resolve();//resolve the defered when ajax call has finished
            }
        });
    });
    return promises;
}

您的setContent:

function setContent(html, url) {
    html = $.parseHTML(html);
    var promises = [];
    $(html).filter("form").each(function() {
        promises = promises.concat(preprocess($(this)));//Concatenating all promises arrays
    });

    $.when.apply($,promises).then(function(){// Use $.when to execute a function when all deferreds are resolved.
        $("#pagemain").html(html);
    });
}