JQuery $.post in a function. Wait for callback to

Question

This question already has an answer here:

• How do I return the response from an asynchronous call? 37 answers

How would I, using $.post() in a function, force the return on the post callback?

Example:

function myFunction(){
   $.post(postURL,mydata,function(data){
      return data; 
   });
}

I have tried playing around with it using .done() and .queue() however neither has worked for me. I understand there is a fundamental flaw in my example; with that said, how can I achieve my desired functionality?

Answer 1

function myFunction(){
   var deferred = new $.Deferred();

   var request = $.ajax({
      url: postURL,
      data: mydata
   });

   // These can simply be chained to the previous line: $.ajax().done().fail()
   request.done(function(data){ deferred.resolve(data) });
   request.fail(function(){ deferred.reject.apply(deferred, arguments) });

   // Return a Promise which we'll resolve after we get the async AJAX response.
   return deferred.promise();
}

Answer 2

This is impossible. $.Ajax calls will always return immediately. You need to deal with the return when it is called through a callback (possibly several seconds later). Javascript never blocks for a given call. It may help to think of your code like this:

 //This entirely unrelated function will get called when the Ajax request completes
 var whenItsDone = function(data) {
   console.log("Got data " + data); //use the data to manipulate the page or other variables
   return data; //the return here won't be utilized
 }

 function myFunction(){
   $.post(postURL, mydata, whenItsDone);
 }

If you're interested more on the benefits (and drawbacks) of Javascript's no-blocking, only callbacks: this Node.js presentation discusses its merits in excruciating detail.