1

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.

8
  • 1
    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, 2013 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, 2013 at 10:15
  • Yes, this depends entirely on the contents of cutTomatoesAlone. Jul 11, 2013 at 10:15
  • 4
    Also, I have this vision that you are programming a machine that chops and cooks tomatoes using Javascript. I do hope this is true. Jul 11, 2013 at 10:16
  • 1
    Learn about promises: learn.jquery.com/code-organization/deferreds. Jul 11, 2013 at 10:18

5 Answers 5

1

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.

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);
    }
2
  • For my case, time is unknown. Depends on the getJSON etc. yet, +1 !
    – Hugolpz
    Jul 11, 2013 at 10:42
  • @Hugolpz How about passing the delay also in param ? Jul 11, 2013 at 10:59
1

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.

0
1

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.

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);
});
1
  • 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. Jul 11, 2013 at 10:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.