JS returning before AJAX call returning output?

Question

Possible Duplicate:
How to return AJAX response Text?

I'm calling a javascript method which in turn sends Ajax request and gives response.I'm getting the result in callback method like "success".
Here Ajax is returning some result, in the mean while javascript method returning result (something as undefined).
But it should return ajax result only.
The problem i was identified is, Javascript and Ajax are both concurrently executing.
How to stop them and first execut Ajax and it's result must send to function which returns the result.
Any idea is Highly Appreciated.. :)

Duplication of http://stackoverflow.com/questions/12560879/javascript-executes-before-getting-result-from-a-ajax-call — Soojoo, Oct 23 '12 at 05:57
It's almost always better to refactor your code to allow for the asynchronous nature of Ajax. (Using synchronous Ajax is usually the wrong solution.) A common technique is rather than having your function return a value have it take a callback as a parameter and then when the Ajax call completes call that callback to pass the return back. — nnnnnn, Oct 23 '12 at 06:01

moribvndvs · Accepted Answer · 2012-10-23T06:19:08.200

By default, $.ajax (and anything that uses it, such as $.post) makes asynchronous requests. You can make the request synchronous by specifying async:false (see documentation). I don't recommend you use synchronous AJAX requests, though, as it degrades performance and leads to poor user experience. Instead, consider using a callback which is invoked in your success handler when the result is complete.

Here are two arbitrary and simple examples, where we have an anchor that we want to have the text replaced from the result of an AJAX call when clicked. Both do the same thing, but the second one is preferred because it keeps the browser responsive.

Synchronous:

function invokeAjaxSync() {
   var text;

   $.ajax({url: '/path/to/resource', async:false, success: function(result) {
      text = result.toString();
   }}); // will wait until this call is complete

   return text;
}

$('a.example').click(function() {
    $(this).text(invokeAjaxSync()); // works, but the browser will be unresponsive while waiting for a response.
});

Asynchronous (better):

function invokeAjaxAsync(callback) { 
   $.ajax({url:'/path/to/resource', success: function(result) {
         callback(result);
   }});
}


$('a.example').click(function() {
     var $this = $(this);

     invokeAjaxAsync(function(result) {
        $this.text(result.toString());
     }); // browser will remain responsive, but still update text when the AJAX call completes.
});

If i use,async:false then until ajax response comes , The javascript method will stop executing and after result comes only the javascript method returns the result??? — Mr.Chowdary, Oct 23 '12 at 05:57
If you use `async:false`, your method making the call will wait until the AJAX response is received (or times out, or is aborted), and then finish the result of the function. — moribvndvs, Oct 23 '12 at 06:01
You can lock up the browser with sync data. Also, it's deprecated. — Yatrix, Oct 23 '12 at 06:03
@HackedByChinese Thanks for the sample code.. It's working.. Awesome... — Mr.Chowdary, Oct 23 '12 at 06:18

JS returning before AJAX call returning output?

1 Answers1