Due its pretty asynchronous nature of JavaScript itself there is practically no such thing like "hold" the request. When you start a request (with JQuery, plain XHR or whatever you use) then the request ist running in the background and the main thread in the Browser continues. So like in your example the loading gif is already hidden despite the request is still running. So Matt suggestion is correct, you have to do stuff, thats depending on the request result, in the callback of that request.

The async option blocks the request and therefore the main thread. And blocking the main thread means like freeze the whole application.

If you try this example, you'll see why the async=false is the problem. (I made this JSFiddle for the example: jsfiddle.net/nmzu83wL/12 The URL makes a request to a server that takes 3 seconds to respond.)

$('.loading-gif').show();

$.ajax({
  url: '/echo/js?js=&delay=3',
  method: 'GET',
  async: false
}).done(function() {

});

// Disable hiding
//$('.loading-gif').hide();

What you will notice here is that the loading indicator will be shown but only after 3 seconds. That is because the async=false is blocking and that blocking is also preventing the repaint needed to show the image from happening. This happens because not every DOM operation is instantaneous. Some operations, like repainting, wait for the main processing thread to yield before running.

I am positive that you will be able to write your logic in such a way that your constraints are still met but are done in an asynchronous way. I didn't entirely understand what you meant by "to be executed if or else the ajax call is made", but if you get stuck and you can clarify, I could propose a solution.