Calling a function and not moving on until complete?

Question

I call two functions in my js which get data via ajax:

getNumContentTotal(ctx);
getContentAll(ctx);

getNumContentTotal(ctx) sets a var that is required by getContentAll(ctx);

Is there a way of not executing the second function until my var is set?

Default behaviour is that `getContentAll()` will be executed _after_ `getNumContentTotal()` has finished, including setting any variables. — marekful, Nov 12 '13 at 14:57
Why not just call `getContentAll(ctx);` when ajax of `getNumContentTotal(ctx);` is done(`.done()` function of ajax)? — nkmol, Nov 12 '13 at 14:59
Have a look at [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call). — Felix Kling, Nov 12 '13 at 15:14

score 2 · Accepted Answer · answered Nov 12 '13 at 15:05

If you're using jQuery (which I'm assuming you are) then return the object that ajax call returns in your getNumContentTotal() and getContentAll() methods. jQuery returns a promise like object allowing you to manage callbacks in a serialized way:

EDIT: A better article on jQuery's promises: Understanding JQuery.Deferred and Promise.

function getNumContentTotal(ctx) {
  return $.ajax(...);
}

function getContentAll(ctx) {
  return $.ajax(...);
}

var promise = getNumContentTotal(ctx);
promise.pipe(function(data) {
  // do something with data
  return getContentAll(ctx);
}).done(function(data) {
  // do something with data
});

score 1 · Answer 2 · answered Nov 12 '13 at 15:04

What about something like this:

function getNumContentTotal(ctx)
{
    $.ajax({
        url: ajaxUrl,
        context: document.body
    }).done(function(data) {
        getContentAll(data);
    });

}

function getContentAll(ctx)
{
   //other function
}

So you only call the next function when the first function has been loaded. This way the variable you will give to the next function is always filled.

Calling a function and not moving on until complete?

2 Answers2