Execute Function One by One

Question

I have 3 different jQuery functions like:

function step1() {
  ...
}

function step2() {
  ...
}

function step3() {
  ...
}

and if I call them like this:

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

they will be all executed in the same time. How can I call them one by one so step2(); is called after step1(); is finished and step3(); is called after step2(); is finished.

// MORE INFO

Step1() is executing a json and appends details to html, Step2() is executing another json and appends info in the divs created by Step1() and Step3() simply hides a loading animation.

// THE FUNCTIONS

As requested by some users, here are the functions:

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

Not knowing what you are executing in each function, I'm assuming none of them executes an asynchronous call themselves, i.e: ajax request and so on.

Should you have additional asynchronous calls occur in each function the below would not apply as is.

One option would be to use call one from the other similar to this:

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

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

function step3() {
    //...
}

or you can use callbacks in the function signature, similar to this:

//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() {
    //...
}

Or using jQuery deferred might work, similar to this:

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

I'm not 100% sure on the deferred solution using .when().

The code above seems to work (DEMO) using when() but as FelixKing mentioned in the comments if you update the methods to return a deferred promise you can do this:

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

---

DEMO - Using a deferred 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.

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

Answer 2

If there is no asynchronous behaviour within the functions then they will be called sequentially. You may be seeing output in the console at different times than you expect, I believe consoles in firefox etc buffer output and can in some cases (although not very often) be misleading.

If you do have asynchronous behaviour within these functions then you either need to make it synchronous or put the call to function2 in the callback to function1 and function3 in the callback to function2. This will ensure that function2 is only called once function1 has reached an apropriate state.