AJAX Done Callback to prevent requests from interrupting each other
To be sure that nothing happens before the AJAX request is achieved, you can simply add the async: false property to your $.ajax({...}).



As pointed by @Tom Stickel, doing so fires a warning about future deprecation of async: false.

I agree, and this is already known from times but, as stated in paragraph 4.5.1 of the page he cited:


  This is a long process that takes many years


It's why I suggest this solution (and also am using it somewhat frequently), but:


only in the case of this kind of situation, where the "detrimental effects to the end user's experience" is clearly not involved (at the opposite, here, it's precisely what is expected)
only for now, considering it's worth applying a so simple solution as long as it works, and change it only when deprecation will effectively happen (note that the involved piece of code might be obsolete first!)