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-off…

Accepted Answer

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

Execute Function One by One

Solution

Problem

Related problems