Javascript fonction asynchrone

Question

J'ai un problème pour comprendre comment cela pourrait/devrait être résolu.

J'ai deux fonctions. Dans la première fonction (je l'appelle loadData()) je fais une requête asynchrone au serveur pour charger des données.

Dans la deuxième fonction (saveData()), je demande également au serveur d'écrire des données. Dans le rappel de cette demande, j'appelle loadData() pour actualiser les données.

Maintenant le problème: Dans la fonction saveData() Je veux attendre loadData() être terminée avant que je montre une boîte de dialogue (comme alert('Data saved'))

Je suppose que cela est un problème commun, mais je ne pouvais pas trouver la solution pour elle (si elle existe ..)

une solution serait de faire les requêtes synchrones, mais le cadre que je utilise ne propose pas et j'espère qu'il ya une meilleure solution ..

Merci à tous!

Answer 1

L'astuce dans ces situations est nicher les callbacks "succès" comme celui-ci:

$.ajax({ 
    url: "/loadData", 
    success: function() { 
     // Data Loaded... Save the data 
     $.ajax({ 
     url: "/saveData", 
     success: function() { 
      // Data Saved... Display alert 
      alert('Data saved'); 
     } 
     }); 
    } 
}); 

Si votre fonction loadData() ressemble à quelque chose comme ceci:

function loadData() { 
    .ajax({ 
     url: "/loadData", 
     success: function() { 
     // Data Loaded... Process the data 
     } 
    }); 
} 

... alors vous voudrez peut-être pour lui donner un argument de rappel qui est invoqué juste avant le retour du rappel de succès:

function loadData(myCallback) { 
    .ajax({ 
     url: "/loadData", 
     success: function() { 
     // Data Loaded... Process the data 

     // ... Your Data Processing Logic ... 

     // Invoke the callback (if one was passed): 
     if (typeof myCallback === 'function') { 
      myCallback(); 
     } 
     } 
    }); 
} 

Ensuite, vous seriez en mesure de mettre en œuvre votre fonction saveData() comme ceci:

function saveData() { 
    loadData(function() { 
     // Data Loaded (and processed by loadData())... Save the data 
     .ajax({ 
     url: "/saveData", 
     success: function() { 
      // Data Saved... Display alert 
      alert('Data saved'); 
     } 
     }); 
    }); 
} 

Vous serait toujours en mesure d'appeler la fonction loadData() sans aucun argument dans d'autres parties de votre script.

Answer 2

L'imbrication des fonctions est une solution, mais c'est une mauvaise idée en ce qui concerne la qualité du code. Vous pouvez jeter un oeil à l'objet différé jquery pour le résoudre.

Deferred documentation