Make sure ajax function finishes before 2nd non-ajax function fires

Question

Similar to the question I just asked,

If I call an ajax function in jQuery and then a non ajax function how can I prevent the non-ajax function from firing until after the first ajax callback function has completed. Will declaring async: false in the first ajax function be enough?

Answer 1

jQuery AJAX functions let you provide a callback that is only called after the request is finished. Call your non-ajax function as part of that callback.

Answer 2

Similar to the answer I posted, I would just use the callback parameter in the ajax call to handle the second function call. For example:

$.post("myScript.py", myData,
  function(response){
    callOtherFunction();        
  }, "json");

Answer 3

If you're talking about this:

$.ajax({...});
someFunction();

where someFunction() won't occur until the AJAX call completes then you have three options:

1. Make the AJAX call async: false. Don't do this. It'll make your page unresponsive;
2. Put someFunction() in the complete/success/error callbacks of the AJAX call. This is the recommended approach; or
3. Use aplugin to manage a request queue eg Ajax Queue.

The first A in AJAX stands for "asynchronous". You just need to get used to the fact that these calls are asynchronous and stop trying to force a synchronous programming model on top of them. Adapt to the new programming model.