Question

I have something like this.

function a() {
  ajax(callback_function);
}

callback_function() {
  // done!, called after ajax is finished
}

function b() {
  a();
  c();  // make sure c is executed AFTER a is finished.
}

function c() {
  // called after a()!
}

How do I make sure that the function c() is called AFTER a() is finished? I think I have to use another callback function, but unsure of what to do.

EDIT

Didn’t make it clear. I’d prefer if I didn’t call c() inside my callback_function since a() can be called without needing to call c().

Answer 1

you can wrap all your callbacks into an anonymous function :

function a(callback) {
    ajax(function(){
        callback_function();
        callback();
    });
}

callback_function() {
  // done!, called after ajax is finished
}

function b() {
  a(c);
   // make sure c is executed AFTER a is finished.
}

function c() {
  // called after a()!
}

or you could register another callback to your callback_function :

function a(callback) {
  ajax(function(){
    callback_function(callback);
});
}

callback_function(callback) {
  // done!, called after ajax is finished
  callback();
}

function b() {
  a(c);
   // make sure c is executed AFTER a is finished.
}

function c() {
  // called after a()!
}

A more elegant (and better) way is to bind callbacks to a certain custom event such as “ajax-done” and after the ajax code successfully executes, you can trigger that specific event.
If you use jquery, the event-method is quite simple :

function a() {
  ajax(function(){
    $(window).trigger('ajax-done');
  });
}

callback_function() {
  // done!, called after ajax is finished
}

function b() {
  a();
   // make sure c is executed AFTER a is finished.
}

function c() {
  // called after a()!
}
$(window).bind('ajax-done',callback_function);
$(window).bind('ajax-done',c);

Of course you can do the same thing without jquery, but it’s a bit messier since you have to make sure that your code is cross-browser.