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

Callback at the end of all the functions contained in one function

本文关键字：函数 一个 回调 包含      更新时间：2023-09-26

我发现自己在一个回调问题上卡住了好几天，我找不到任何方便的解决方案。问题在这里:

我有一些像这样的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
}

我想开始执行masterFunction_B()时，所有的littleFunctions()完成。当我尝试将masterFunction_B()设置为masterFunction_A()的回调时，似乎它是在masterFunction_A()启动所有littleFunctions()时启动的，但不是当littleFunctions()结束时…

I tried to:

  • 设置一个计时器，并在计时器结束时启动masterFunction_B()，但是…这不是正确的方式
  • 设置回调在所有的littleFunctions和计数器计数，直到正确的回调量被调用，但我认为有一个更好的和更干净的方式来得到我想要的。

你能帮忙吗?

非常感谢!

—EDIT—

这是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>");
                }   

            });
        }
    });
}

使用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()
    );
}

看看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);
相关文章：