The issue arises due to the asynchronous nature of AJAX. This results in the updateStatus() calls being executed in sequence but returning immediately, causing the JS interpreter to reach hideLoader() before any data is retrieved from the AJAX requests.

To solve this problem, you need to trigger the execution of hideLoader() after the completion of the AJAX calls event.

When working on AJAX programming, it's important to view JavaScript as event based rather than procedural. Each call needs to wait for the previous one to finish before executing. One way to achieve this is by connecting the subsequent calls to a callback that triggers after the completion of the initial call. The specific method will depend on the inner workings of your AJAX library (assuming you are using one). Here is a basic example:

showLoader();

  updateStatus('cron1', function() {
    updateStatus('cron2', function() {
      updateStatus('cron3', function() {
        updateStatus('cronEmail', function() {
          updateStatus('cronHourly', function() {
            updateStatus('cronDaily', funciton() { hideLoader(); })
          })
        })
      })
    })
  })
});

The concept behind this approach is that updateStatus requires its usual argument along with a callback function that executes upon completion. It is a common practice to pass a function like onComplete into another function to serve as a trigger.

Update

If you are utilizing jQuery, refer to the documentation for $.ajax() at: http://api.jquery.com/jQuery.ajax/

Your code may resemble something similar to:

function updateStatus(arg) {
  // processing

  $.ajax({
     data : /* something */,
     url  : /* something */
  });

  // processing
}

You can adjust your functions to include a callback as their second parameter like this:

function updateStatus(arg, onComplete) {
  $.ajax({
    data : /* something */,
    url  : /* something */,
    complete : onComplete // called when AJAX transaction finishes
  });

}

If you're looking to implement this functionality in your code, all you have to do is include the following line:

async: false,

This will modify your Ajax call to resemble the following structure:

jQuery.ajax({
            type: "GET",
            url: "something.html for example",
            dataType: "html",
            async: false,
            context: document.body,
            success: function(response){

                //perform actions here

            },
            error: function() {
                alert("Apologies, the requested content could not be located.");
            }  
        });

While some adjustments may need to be made for different data formats like XML, JSON, etc., the crux of the matter lies in setting async: false,. This directive instructs the JavaScript engine to halt execution until the success callback has been resolved (or errored out), thereby continuing onwards afterwards. However, keep in mind that this approach also renders the entire page unresponsive until the Ajax response is received - a process typically taking milliseconds but potentially longer.

I hope these instructions provide the solution you were seeking :)

We encountered a similar issue in one of our previous projects and came up with a solution using a counter. By incrementing the counter for each call to updateStatus and decrementing it in the response function of the AJAX request (depending on the AJAX JavaScript library being used), we were able to track the completion of all AJAX requests.

Once the counter reaches zero, indicating that all AJAX requests have been completed, you can then proceed to call hideLoader().

Below is an example implementation:

var loadCounter = 0;

function updateStatuses(){
    updateStatus('cron1'); 
    updateStatus('cron2');
    updateStatus('cron3');    
    updateStatus('cronEmail');
    updateStatus('cronHourly');
    updateStatus('cronDaily');
}

function updateStatus(what) {
    loadCounter++;

    // Perform the AJAX call here and specify the response method as updateStatusCompleted()
}

function updateStatusCompleted() {
    loadCounter--;
    if (loadCounter <= 0)
        hideLoader(); // This will hide the 'loader.gif' displayed in the UI
}

The sequence in which the code executes is irrelevant.

The main reason why the loader image isn't displayed is because the user interface (UI) doesn't get updated while the function is running. Any changes made to the UI will only become visible once the function exits and control is returned to the browser.

To address this issue, you can implement a timeout after showing the image, allowing the browser to update the UI before proceeding with the rest of the code:

function updateStatuses(){

  showLoader(); // Display the 'loader.gif' on the UI

  // Set a timeout to continue the code execution after the UI updates
  window.setTimeout(function(){
    updateStatus('cron1'); // Initiates an AJAX request to retrieve something's status
    updateStatus('cron2');
    updateStatus('cron3');
    updateStatus('cronEmail');
    updateStatus('cronHourly');
    updateStatus('cronDaily');

    hideLoader(); // Remove the 'loader.gif' from the UI
  },0);
}

Another potential factor that may cause your code to appear out of order is asynchronous AJAX requests. In this case, the function won't wait for the responses. The response handling function will run when the browser receives the response. If you wish to hide the loader image after receiving all the responses, you'll need to do so within the last response handler function. Since the responses may not arrive in the order of your requests, you'll have to keep track of the number of responses received to determine when the final one arrives.

It has been noted by others that engaging in a synchronous operation is not ideal. Embrace the asynchronous nature, as indicated by the A in AJAX.

Allow me to share an insightful analogy about synchronous vs asynchronous operations. For a detailed explanation, you can refer to the full post on the GWT forum. Here are the key analogies:

Picture this scenario ...

You're sitting on the couch watching TV, realizing you're out of beer. You ask your partner to go to the liquor store and buy some. As soon as your partner leaves, you get up, walk to the fridge, and discover there's no beer!

Naturally, there's no beer because your partner is still on their way to the store. You'll have to wait for them to return before you can enjoy a cold one.

But if you prefer it to be synchronous, imagine this ...

... your partner heads out ... suddenly, the world comes to a halt around you. You can't move, breathe, answer the door, or even finish watching your show while they go fetch your beer across town. You're stuck motionless, turning blue until you pass out...only to wake up later with paramedics surrounding you and your partner saying, "I got your beer."

This is exactly what happens when you insist on a synchronous server call.

To enhance your debugging experience, consider installing Firebug and inserting a line like the one below into showLoader, updateStatus, and hideLoader functions:

Console.log("event logged");

By doing so, you can monitor the function calls in chronological order within the console window. Now, let's delve into what exactly your "updateStatus" method accomplishes.

Chances are it initiates a background task before returning, resulting in the hideLoader call occurring before any background tasks have completed. To address this issue, utilize your Ajax library's "OnComplete" or "OnFinished" callback to trigger the subsequent updateStatus call.

Transfer the updateStatus function calls to a separate function and schedule it using setTimeout.

If your ajax requests are running asynchronously, implement a tracking mechanism to keep tabs on their completion status. Each callback method should flag itself as "completed" and verify if it is the final one to do so before triggering the hideLoader function.

When it comes to managing asynchronous requests, one of the most effective solutions is using the 'Promise'.
The Promise object signifies the eventual completion (or failure) of an asynchronous task.

For example:

let myFirstPromise = new Promise((resolve, reject) => {
  // We invoke resolve(...) when the asynchronous task succeeds, and reject(...) when it fails.
  // Here, we utilize setTimeout(...) to mimic async code execution. 
  // Typically, you would use something like XHR or an HTML5 API in practice.
  setTimeout(function(){
    resolve("Success!"); // Hooray! Everything went smoothly!
  }, 250);
});  

myFirstPromise.then((successMessage) => {
  // successMessage represents what was passed into the resolve(...) function earlier.
  // It doesn't have to be a string, but usually, for success messages, it will be.
  console.log("Great job! " + successMessage);
});

Promise

If you have 3 asynchronous functions and require them to execute sequentially, follow these steps:

let FirstPromise = new Promise((resolve, reject) => {
    FirstPromise.resolve("First!");
});
let SecondPromise = new Promise((resolve, reject) => {

});
let ThirdPromise = new Promise((resolve, reject) => {

});
FirstPromise.then((successMessage) => {
  jQuery.ajax({
    type: "type",
    url: "url",
    success: function(response){
        console.log("First! ");
        SecondPromise.resolve("Second!");
    },
    error: function() {
        //handle your error
    }  
  });           
});
SecondPromise.then((successMessage) => {
  jQuery.ajax({
    type: "type",
    url: "url",
    success: function(response){
        console.log("Second! ");
        ThirdPromise.resolve("Third!");
    },
    error: function() {
       //handle your error
    }  
  });    
});
ThirdPromise.then((successMessage) => {
  jQuery.ajax({
    type: "type",
    url: "url",
    success: function(response){
        console.log("Third! ");
    },
    error: function() {
        //handle your error
    }  
  });  
});

By adopting this method, you gain control over all asynchronous operations based on your needs.