javascript - 一个一个执行函数

Question

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

function step1() {
  ...
}

function step2() {
  ...
}

function step3() {
  ...
}

如果我这样称呼他们:

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

它们将同时执行。我如何一个一个地调用它们，以便在 step1(); 完成后调用 step2(); 并调用 step3(); step2(); 完成后。

//更多信息

Step1() 正在执行一个 json 并将详细信息附加到 html，Step2() 正在执行另一个 json 并将信息附加到由 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();

});

Answer 1

不知道您在每个函数中执行什么，我假设它们都没有自己执行异步调用，即: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 如果您更新方法以返回 deferred promise你可以这样做:

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

---

DEMO - 使用延迟 promise

---

Each deferred object must be resolved() though for the next method to be executed.
This would also give you some control if you have a scenario for example in which you don't want to execute step3() if step2() fails to do something and calls .reject() for instance.

Have a play around with the deferred objects in the fiddle and have a look at the deferred promise documentation too for more details.

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