Question

I have a function which makes an AJAX request to a server and returns relevant information after it completes.
I have another function which manipulates some variables in its namespace based on the returned information.

Currently, I am appending a ‘callback’ argument to the first function, which is called when the request completes. This, however, blurs the purpose of the first function – instead of being a ‘getInfo’ function, it’s become a ‘getInfoAndDo’ function.

Ideally, I’d like to call the second function (a ‘do’ function, which calls the first function, a ‘get’ function) and does its thing.

I have looked around and found jQuery methods such as .ajaxStop and .ajaxComplete, but they seem to only to work when bound to DOM elements. Is there any way to do this entirely in javascript?

e.g.

function _getEventAttendance(uid, callback) {
  var attendQuery = FB.Data.query('SELECT eid,rsvp_status,start_time FROM event_member WHERE uid = {0}', uid);
  FB.Data.waitOn( [attendQuery],
    function (args){
      callback(args[0]);
    }
  );
}

function logAttendance(attendance){
  console.log(attendance);
}

Currently, I am doing:

_getEventAttendance(123456789, logAttendance);

which seems ridiculous to me.

Is there a way to write the code such that I can change the code snippet inside _getEventAttendance / remove the callback argument:

FB.Data.waitOn( [attendQuery],
  function (args){
    return args[0];
  }
);

and then make calls that are equivalently as simple as :

logAttendance.ajaxComplete(_getEventAttendance(123456789));

(I’m just making up the syntax for this, I have no idea how it’s supposed to be written.)

Answer 1

$.when(<AJAX Request>).then(function(response){...});

Optionally use $.pipe() to filter response first.