2

我有 3 个不同的 jQuery 函数，例如：

function step1() {
  ...
}

function step2() {
  ...
}

function step3() {
  ...
}

如果我这样称呼他们：

step1();
step2();
step3();

它们将同时执行。我怎样才能一一调用它们，所以step2();在step1();完成后step3();调用，在完成后调用step2();。

// 更多信息

Step1()正在执行一个 json 并将详细信息附加到 html，Step2()正在执行另一个 json 并将信息附加到由创建的 div 中Step1()并Step3()简单地隐藏加载动画。

// 函数

根据一些用户的要求，以下是功能：

jQuery.noConflict();

jQuery(document).ready(function($) {

    var cardType = $.cookie('cardType');
    var categoryID = $.cookie('categoryID');

    function step1() {
        $.getJSON('http://domain.com/benefits/active/all.json', function(data) {
            $.each(data, function(i,item){
                if (item.benefit_type_id == categoryID) {
                    content = '<li><a class="showDetails" data-offer-description="' + item.description + '" data-offer-period="' + item.begin_date + ' - ' + item.end_date + '"><div class="company" title="' + item.business_id + '"></div><div class="shortdescription">' + item.name + '</div></a></li>';
                    $(content).appendTo("#thelist");
                }
            }); 
            step2();
        });
    } // function step1();

    function step2() {  
        $('.company').each(function(i, item) {
            var tempTitle = item.title;
            $.getJSON('http://domain.com/businesses/from_list/' + tempTitle + '.json', function(data2) {
                $.each(data2, function(i,item){
                    content = '<span>' + item.name + '</span>';
                    $(content).appendTo("div[title='" + tempTitle + "']");
                }); 
                step3();
            });
        });
    } // function step2();

    function step3() {
        loaded();
        $('#loading').delay(1000).fadeOut('slow', function() {
            // Animation complete.
        });
    } // function step3();

    step1();

});
4

2 回答 2

5

不知道您在每个函数中执行什么，我假设它们都没有自己执行异步调用，即：ajax 请求等等。

如果您在每个函数中发生额外的异步调用，则以下内容将不适用。

一种选择是使用与此类似的调用之一：

function step1() {
    //...
    step2();
}

function step2() {
    //...
    step3();
}

function step3() {
    //...
}

或者您可以在函数签名中使用回调，类似于：

//pass step2 function as parameter to step1
//pass step3 function as parameter to step2
step1(step2(step3));

function step1(callback) {
    //...
    callback();
}

function step2(callback) {
    //...
    callback();
}

function step3() {
    //...
}

或者使用 jQuery deferred 可能会起作用，类似于：

$.when($.when(step1()).then(step2)).then(step3);

我不是 100% 确定使用.when().

上面的代码似乎可以使用（DEMO）when() ，但如FelixKing评论中所述，如果您更新方法以返回延迟承诺，您可以这样做：

step1().then(step2).then(step3);

演示- 使用延迟承诺

每个延迟对象都必须通过resolved()，才能执行下一个方法。如果您有一个场景，例如，如果
您不希望执行某些操作并调用例如，这也将为您提供一些控制。 step3()step2().reject()

玩弄小提琴中的延迟对象，并查看延迟承诺文档以获取更多详细信息。

来自 DEMO 的示例代码：

step1().then(step2).then(step3);

function step1() {
    var $dfStep1 = new $.Deferred();

    console.log("step1");

    $dfStep1.resolve();
    return $dfStep1.promise();
}

function step2() {
    var $dfStep2 = new $.Deferred();

    console.log("step2");

    $dfStep2.resolve();
    return $dfStep2.promise();
}

function step3() {
    var $dfStep3 = new $.Deferred();

    console.log("step3");

    $dfStep3.resolve();
    return $dfStep3.promise();
}
于 2013-01-21T00:06:04.867 回答
0

如果函数中没有异步行为，那么它们将被顺序调用。您可能会在与预期不同的时间看到控制台中的输出，我相信 Firefox 等中的控制台缓冲输出，并且在某些情况下（尽管不经常）可能会产生误导。

如果您在这些函数中确实有异步行为，那么您需要使其同步或将对 function2 的调用放在对 function1 的回调中，并将 function3 放在对 function2 的回调中。这将确保仅在 function1 达到适当状态时才调用 function2。

于 2013-01-21T00:05:28.870 回答