How to 'chain' JS function after the first is fully done

Question

I have a functions which should run one AFTER the other, such:

function cutTomatoesAlone(Kg){
    // slice my stuff
}
function cookTomatoes(Minutes){
    // boil my stuff
}

I call them such:

cutTomatoesAlone(15) // 15kg, need 3 hours!
cookTomatoes(10); // need 10 minutes

But the cookTomatoes(10) finish before my cutTomatoesAlone(15).

How to run cutTomatoesAlone(15) first and when finished, then run cookTomatoes(10) ?

Edit: cutTomatoesAlone() load an external JSON. cookTomatoes(10) work on it.

actaully it depends on the code you have inside the function.. if the code is asynchorus or synchronus...if synchoronus then code you have should work.. anyways please add all your codes — bipen, Jul 11 '13 at 10:14
@Hugolpz: Both are calling synchronously? In that case only after completing the execution of 1st method the 2nd one will start. — Mahesh KP, Jul 11 '13 at 10:15
Yes, this depends entirely on the contents of `cutTomatoesAlone`. — lonesomeday, Jul 11 '13 at 10:15
Also, I have this vision that you are programming a machine that chops and cooks tomatoes using Javascript. I do hope this is true. — lonesomeday, Jul 11 '13 at 10:16
Learn about promises: http://learn.jquery.com/code-organization/deferreds/. — Felix Kling, Jul 11 '13 at 10:18
Also have a look at [How to return the response from an AJAX call?](http://stackoverflow.com/q/4908875/218196). — Felix Kling, Jul 11 '13 at 10:32

score 1 · Answer 1 · answered Jul 11 '13 at 10:13

1

You need the method The setTimeout() which will wait the specified number of milliseconds, and then execute the specified function.

function cutTomatoesAlone(Kg){
    // slice my stuff

    setTimeout(function() { 
      cookTomatoes(10)
         }, delay);
    }

answered Jul 11 '13 at 10:13

Suresh Atta

120,458
37
198
307

For my case, time is unknown. Depends on the getJSON etc. yet, +1 ! – Hugolpz Jul 11 '13 at 10:42
@Hugolpz How about passing the delay also in param ? – Suresh Atta Jul 11 '13 at 10:59

score 1 · Answer 2 · answered Jul 11 '13 at 10:16

If your functions are independent, it should work the way you expect, assuming you're not doing stuff like making http get requests asynchronously.

If you are, what you need to do is call the second function when the first one returns from its request, using JQuery's $.done() function.

score 1 · Answer 3 · answered Jul 11 '13 at 10:19

Give cutTomatoesAlone a callback.

var cookingTimePerKg = 10;

function cutTomatoesAlone(Kg, Callback) {
  // slice my stuff

  // when done and a callback is defined do the callback
  if(Callback) Callback(Kg*cookingTimePerKg);
}

Then you could do the following:

cutTomatoesAlone(15, cookTomatoes);

The callback could also be fired on the onComplete of the (potential) XHR request.

Edorka · Answer 4 · 2013-07-11T10:38:14.670

1

Some Function object prototype tuning would make it easier to read

Function.prototype.after = function(callback){
    this();
    if( typeof(callback) == "function")
        callback();
}

a = function(){alert(1)};
a.after( function(){alert(2)} )

So with cooking subject:

var cutThem = function(){
    cutTomatoesAlone(15) // 15kg, need 3 hours!
}
cutThem.after( function(){
     cookTomatoes(10);
});

this is a proposal for general purpose, when ajax loads are on the game it's better to use their "whenDone" option to supply them a callback.

$("#basket").load("url.extension", {kilos: kg}, 
function(){
     cookTomatoes(10);
});

edited Jul 11 '13 at 10:38

answered Jul 11 '13 at 10:21

Edorka

1,781
12
24

It's still the same as calling `cutTomatoesAlone` and `cookTomatoes` directly after each other, so it won't make a difference. If the OP's code doesn't work as desired, this won't either. – Felix Kling Jul 11 '13 at 10:33

score 1 · Accepted Answer · answered Jul 11 '13 at 10:37

Learn about promises and deferred objects. Every Ajax function in jQuery returns a promise, so you can easily chain your function calls.

For example:

function cutTomatoesAlone(Kg) {
    return $.getJSON(...); // return the promise provided by $.getJSON
}

// called as
cutTomatoesAlone(15).then(function() { // attach callback
    cookTomatoes(10);
});

In case of an Ajax call, the promise is resolved once the response was successfully retrieved.

How to 'chain' JS function after the first is fully done

5 Answers5