1

i have 3 functions and in each function i have a AJAX call which is synchronous in nature. 

function()
{
  a();
  b();
  c();
}
a()
{
   ajaxGet(globals.servicePath + '/Demo.svc/GetDemoList/' + sessionStorage.SessionId,function(data, success) {}, '', {async: false}, false);
}

similarly for b() and c().

now i want to wait for the execution of these calls and then proceed with the other operations since those operations are based on the result i get here. how can i get this done?

Nikki
  • 137
  • 2
  • 3
  • 17
  • Do you have control over the code in `a()`, `b()` or `c()`? If so, return the promise from `$.ajax` and use `$.when` in your anonymous function. – Rory McCrossan Apr 13 '15 at 14:30
  • 2
    Look into jquery .promise.done – Moishe Lipsker Apr 13 '15 at 14:30
  • http://blog.slaks.net/2015-01-04/async-method-patterns/ – SLaks Apr 13 '15 at 14:31
  • 2
    Never use `async: false`. Learn to work the way browsers intended (asynchronously) :) – iCollect.it Ltd Apr 13 '15 at 14:31
  • If they're **synchronous** then you don't have to do anything special at all to wait for them. – James Montagne Apr 13 '15 at 14:33
  • If your AJAX calls are synchronous, then they should block and return. In which case, you should be able to use the returned results for use in other functions. That said, synchronous ajax is the devil, and I would rather tell you to make asynchronous calls wherein each calls onSuccess callback contained a call to the next function in the chain. – Thomas Preston Apr 13 '15 at 14:38
  • @TrueBlueAussie well, how is it terrible? *"now i want to wait for the execution of these calls and then proceed with the other operations since those operations are based on the **result i get here**. how can i get this done?"* – Amit Joki Apr 13 '15 at 14:39
  • @TrueBlueAussie http://stackoverflow.com/questions/5280699/jquery-when-understanding? – Amit Joki Apr 13 '15 at 14:42
  • @TrueBlueAussie IMO, there is no need for it to work as long as the content is correct. Anyway, reopened it. If you find a better alternative, then close it else leave it :) – Amit Joki Apr 13 '15 at 14:46
  • @Amit Joki: added some appropriate examples to my answer to keep it simple (both chained and parallel). – iCollect.it Ltd Apr 13 '15 at 14:58
  • @TrueBlueAussie great then no need to close it.! – Amit Joki Apr 13 '15 at 15:00

1 Answers1

15
  • A: never use async: false. That way leads to the dark side!
  • B: see A :)

One solution is the use the jQuery promises returned from Ajax calls.

If you want to know when all 3 are done (asynchronously in any order) use $.when():

function()
{
  $.when(a(), b(), c()).done(function(){
       // Now do something else
  });
}

and get each method to the return the jQuery promise of the Ajax call:

function a()
{
   return $.ajax(globals.servicePath + '/Demo.svc/GetDemoList/' + sessionStorage.SessionId,function(data, success) {}, ''...);
}

I mocked up some fake "ajax calls" using timers to show this:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/rqq41Lg3/

If, for some reason, you want them to run sequentially, then fire your extra code, you can chain them with then

a().then(b).then(c).done(function(){
    console.log("All done");
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/rqq41Lg3/1/

iCollect.it Ltd
  • 92,391
  • 25
  • 181
  • 202