Question

我发现自己在回调问题上停留了几天，我找不到任何方便的解决方案。这是问题所在：

我有一些看起来像那样的jQuery

$(document).ready(function(){
    masterFunction_A();
    masterFunction_B();
});

function masterFunction_A() {
    littleFunction_1();
    littleFunction_2();
    littleFunction_3();
    littleFunction_4();
    // etc...
}
function masterFunction_B() {
    // do stuff
}

我想在所有littleFunctions（）完成后开始执行masterFunction_B（）。当我尝试将masterFunction_B（）设置为masterFunction_A（）的回调时，它似乎是在masterFunction_A（）启动所有littleFunctions（）时启动的，但是当littleFunctions（）结束时却没有...

我试图：

设置一个计时器，并在该计时器的末尾启动masterFunction_B（），但......这不是一个正确的方法
在所有littleFunctions和一个计数器中设置回调，直到调用适量的回调为止，但我认为有更好，更清晰的方式来获得我想要的东西。

你能帮忙吗？

非常感谢！

- 编辑 -

这是masterFunction_A（）的内容，实际上称为loadContents（）：

function loadContents () {  

    $.getJSON('data/data.json', function(data) {

        for (var i = 0 ; i < data.length ; i++) {
            $(".projects_ordered_list").append("<!-- PROJECT " + i + " -->");
            $(".projects_ordered_list").append("<li id='projects_ordered_list_item_" + i + "'></li>");
        }

        for (var i = 0 ; i < data.length ; i++) {

            $("#projects_ordered_list_item_" + i).load('projects.html', function() {

                var this_html_id = $(this).attr("id");
                var this_id = this_html_id.substr(this_html_id.length - 1);
                this__display_id = this_id;
                this__display_id++;

                $(this).find(".project_id").css("background", data[this_id].color);
                $(this).find(".project_id_title").html(this__display_id + ".");
                $(this).find(".project_name").html(data[this_id].name.en);
                $(this).find(".project_date").html(" — " + data[this_id].date.en);

                for (var j = 0 ; j < data[this_id].imgs.length ; j++) {
                    $(this).find(".bxslider").append("<li><img src='" + data[this_id].imgs[j] + "'></li>");
                }   


            });

        }

    });

}

Answer 1

看看jQuery Deferred功能。我认为这正是你所需要的。

首先，为每个littleFunction创建一个Deferred：

dfd1 = $.Deferred();
dfd2 = $.Deferred();
dfd3 = $.Deferred();
dfd4 = $.Deferred();

在每个littleFunction中，解析最后的Deferred：

function littleFunction1() {
  ...
  dfd1.resolve();
}

...

解决所有Deferred后，开始执行master_Function_B：

$.when(dfd1, dfd2, dfd3, dfd4).then(masterFunction_B);

Answer 2

使用内置于jQuery ajax函数中的jQuery延迟，你可以使它完全像这样工作。

首先，让每个littleFunction_x()代码看起来像这样：

function littleFunction_1() {
     var d = $.getJSON(...)
     // other code
     return d;
}

然后，你可以这样做：

$(document).ready(function(){
    $.when(masterFunction_A()).done(masterFunction_B);
});

function masterFunction_A() {
    var d = $.Deferred();
    $.when(littleFunction_1(), 
           littleFunction_2(),
           littleFunction_3(),
           littleFunction_4()
    ).done(function() {
        d.resolve();
    });
    return d;
}

在考虑了一下之后，我想你也可以做一个稍微清洁的版本：

$(document).ready(function(){
    masterFunction_A().done(masterFunction_B);
});

function masterFunction_A() {
    return $.when(littleFunction_1(), 
           littleFunction_2(),
           littleFunction_3(),
           littleFunction_4()
    );
}

在一个函数中包含的所有函数的末尾回调

2 个答案: