jQuery attendre que l'appel ajax soit terminé avant de continuer

Question

J'ai un problème avec un appel ajax jQuery. Je dois attendre que l'appel soit terminé pour renvoyer une valeur. Cependant, le script semble sauter en avant et ne pas attendre que l'appel soit terminé. ma fonction retourne alors "indéfini".

J'ai essayé d'utiliser la méthode .ajax() et de définir la valeur de async sur false, mais cela ne fonctionnerait pas non plus.

Je pourrais obtenir ma fonction pour retourner la valeur que j'ai pu grâce à l'appel ajax?

Merci!

Voici le code:

function get_rsrce_name(){ 

    jQuery.post(

     '<?php echo admin_url('admin-ajax.php'); ?>', 

     { action :'my_action', option_rsrce : 'option_rsrce' }, 

     function(data) { 

      output = data.option_name;   

     }, 

     "json" 
    );  

    return output; 
} 

Answer 1

La raison pour laquelle il ne fonctionne pas lorsque vous dites à exécuter de manière synchrone est que la « sortie » variable est uniquement définie dans le cadre de la fonction de rappel.

Il y a certainement une meilleure façon de faire ce que vous essayez de faire, mais sans plus de contexte, il sera difficile d'expliquer ce que cela pourrait être.

Je recommande la lecture sur « javascript champ variable »

Answer 2

ce que dit expansion Josh, vous avez des problèmes avec la portée de la variable « de sortie ». Vous pouvez corriger cela en déclarant la sortie en haut de votre fonction comme ceci:

var output; 

Answer 3

par défaut de méthode .post() de jQuery à l'exécution de manière asynchrone, à savoir: la fonction post() ne s'arrête pas et attendre la réponse , il revient juste immédiatement et le reste de votre script continue. Dans ce cas, il continue à votre instruction return.

Et maintenant nous sommes dans une condition de course classique ... la requête AJAX peut-elle être complète ET exécuter le function (data) avant que le reste du script ne continue jusqu'à l'appel de retour? Étant donné que la plupart des réseaux ont des latences mesurées en millisecondes, l'appel de retour sera exécuté quelques microsecondes plus tard, très probablement pas ... l'appel de retour gagnera la course à chaque fois.

Vous devrez réorganiser votre code afin que la fonction externe appelant cette requête AJAX puisse être rappelée avec les résultats de la requête AJAX.

Une méthode simple pour le faire est de faire une fonction en deux parties:

function do_ajax(parameters, data) { 
    if (data == null) { 
     jquery.post(
      .... 
      success: function(data) { do_ajax(parameters, data); } 
     ); 
    } else { 
     ... handle response here ... 
    } 
} 

De cette façon, la fonction peut être appelée avec toutes les données dont vous avez besoin pour passer dans l'appel AJAX (parameters), et le paramètre data est initialement nul. La fonction voit que les données sont nulles, et fait l'affaire AJAX. Une fois que la réponse du serveur revient, la fonction s'appelle à nouveau, mais avec les données de réponse fournies, et l'autre partie de la fonction qui gère les données est appelée.

Answer 4

Je ne m'attendrais pas à ce que votre problème soit lié à des problèmes de portée, car JavaScript a une portée de fonction et non une portée de bloc. Les variables déclarées n'importe où dans une fonction sont disponibles ailleurs dans la fonction.C'est pourquoi JSLint vous dérange de les déclarer en haut: Non parce que c'est important sur le plan fonctionnel, mais parce qu'il vous rappellera que vos variables sont comme comme si elles étaient déclarées en haut, quel que soit l'endroit où vous les déclarez. Essayez cet exemple simple:

function ajax(callback) { callback(); } 
$(function() { 
    ajax(function() { x = 7; }); 
    alert(x); // x == 7 
}); 

La question est votre $.post appel est asynchrone. Vous atteignez la ligne return output; avant la ligne output = data;. Cela se produit car $.post renvoie immédiatement et permet à votre programme de continuer, alors qu'un appel AJAX potentiellement lent se produit. Lorsque l'appel AJAX est terminé, il déclenche son rappel complete.

Vous devez restructurer votre code afin que vous fassiez quelque chose avec votre valeur dans la fonction de rappel que vous passez à $.post. Vous pouvez accomplir cela en passant dans un paramètre de rappel à get_rsrce_name():

function get_rsrce_name(onComplete) { 
    $.post(url, data, function(data) { onComplete(data); }); 
}