Comment voulez-vous faire un code javascript à exécuter *afin*

Le problème se produit parce que l'AJAX est dans sa nature asynchronus. Cela signifie que le updateStatus() appelle, en effet, sont exécutées dans l'ordre, mais retourne immédiatement et la JS interprète atteint hideLoader() avant tout les données sont récupérées à partir de la requête AJAX.

Vous devez effectuer les hideLoader() sur un événement où les appels AJAX sont finis.

Je pense à tout ce que vous devez faire est de les avoir dans votre code:

async: false,

De sorte que votre appel Ajax devrait ressembler à ceci:

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

                //do stuff here

            },
            error: function() {
                alert("Sorry, The requested property could not be found.");
            }  
        });

De toute évidence, certains de ce besoin de changement pour XML, JSON, etc, mais la async: false, est le point principal ici qui racontent la JS moteur à attendre jusqu'à ce que la réussite d'appel ont retourné (ou d'échec selon le cas), et puis continuer.
Rappelez-vous il ya un inconvénient à cela, et c'est que l'ensemble de la page ne répond plus jusqu'à ce que l'ajax est de retour!!! généralement dans les millisecondes, ce qui n'est pas un big deal mais POURRAIT prendre plus de temps.

Espère que c'est la bonne réponse et il vous aide à vous 🙂

Cela n'a rien à voir avec l'ordre d'exécution du code.

La raison que l'image de chargement ne se montre jamais, c'est que l'INTERFACE utilisateur n'est pas à jour lors de votre fonction est en cours d'exécution. Si vous faites des changements dans l'INTERFACE utilisateur, ils n'apparaissent pas jusqu'à la sortie de la fonction et revenir au navigateur.

Vous pouvez utiliser un délai d'attente après la définition de l'image, donnant le navigateur est une chance de mettre à jour l'INTERFACE utilisateur avant de commencer le reste du code:

function updateStatuses(){

  showLoader() //show the 'loader.gif' in the UI

  //start a timeout that will start the rest of the code after the UI updates
  window.setTimeout(function(){
    updateStatus('cron1'); //performs an ajax request to get the status of something
    updateStatus('cron2');
    updateStatus('cron3');
    updateStatus('cronEmail');
    updateStatus('cronHourly');
    updateStatus('cronDaily');

    hideLoader(); //hide the 'loader.gif' in the UI
  },0);
}

Il y a un autre facteur qui peut également rendre votre code apparaissent à l'exécution de l'ordre. Si vos requêtes AJAX sont asynchrones, la fonction n'auront pas à attendre pour les réponses. La fonction qui se charge de la réponse à exécuter lorsque le navigateur reçoit la réponse. Si vous souhaitez masquer l'image de chargement après la réponse a été reçu, vous devez faire lors de la dernière réponse de la fonction de gestionnaire de pistes. Que les réponses n'ont pas d'arriver dans l'ordre que vous avez envoyé la demande, vous devez compter le nombre de réponses que vous avez appris à connaître lors de la dernière vient.

Installer Firebug, puis ajouter une ligne de ce genre pour chacun des showLoader, updateStatus et hideLoader:

Console.log("event logged");

Vous verrez répertoriés dans la fenêtre de la console, les appels à votre fonction, et ils seront dans l'ordre. La question, est-ce que votre "updateStatus" méthode de faire?

Vraisemblablement, il démarre une tâche en arrière-plan, puis revient, de sorte que vous arriverez à l'appel à hideLoader avant tout des tâches en arrière-plan de la finition. Votre bibliothèque Ajax a probablement une "OnComplete" ou "OnFinished" rappel - appel suivants updateStatus à partir de là.

L'une des meilleures solutions pour le traitement de toutes les demandes asynchrones est le "Promesse".

La Promesse de l'objet représente la réalisation éventuelle (ou l'échec) d'une opération asynchrone.

Exemple:

let myFirstPromise = new Promise((resolve, reject) => {
  //We call resolve(...) when what we were doing asynchronously was successful, and reject(...) when it failed.
  //In this example, we use setTimeout(...) to simulate async code. 
  //In reality, you will probably be using something like XHR or an HTML5 API.
  setTimeout(function(){
    resolve("Success!"); //Yay! Everything went well!
  }, 250);
});  

myFirstPromise.then((successMessage) => {
  //successMessage is whatever we passed in the resolve(...) function above.
  //It doesn't have to be a string, but if it is only a succeed message, it probably will be.
  console.log("Yay! " + successMessage);
});

Promesse

Si vous avez 3 async fonctions et s'attendre à exécuter dans l'ordre, procédez comme suit:

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
    }  
  });  
});

Avec cette approche, vous pouvez gérer toutes les opération asynchrone comme vous le souhaitez.