Comment puis-je renvoyer une valeur récupérée par AJAX à la fonction parente de la fonction en cours dans JavaScript?

Question

J'ai le code JavaScript suivant (et jQuery) Code:

function checkEmail(email) { 
    if (email.length) { 
     $.getJSON('ajax/validate', {email: email}, function(data){ 
      if (data == false) { 
       // stuff 
      } 
      return data; 
     }) 
    } 
} 

Je veux la fonction anonyme à return data à la fonction parent, checkEmail(). J'ai essayé de faire quelque chose comme ceci:

function checkEmail(email) { 
    if (email.length) { 
     var ret = null; 
     $.getJSON('ajax/validate', {email: email}, function(data){ 
      if (data == false) { 
       // stuff 
      } 
      ret = data; 
     }) 
     return ret; 
    } 
} 

Mais bien sûr, cela ne fonctionnera pas parce que le $.getJSON() appel est asynchrone, il return ret avant la requête GET est terminée.

Une pensée ici?

Merci!

Answer 1

Généralement, la meilleure façon de gérer ce type de problème consiste à utiliser une certaine forme de fonction de rappel. En fait, c'est vraiment la seule solution praticable - la seule autre option est de coder vos propres extensions sur le navigateur, et c'est un peu trop (à moins que vous n'aimiez vraiment vous taper la tête contre un mur). Il y a en fait quelques questions parallèles sur ces forums: vous pouvez essayer de chercher quelques-uns, beaucoup sont très bons.

Modifier votre code:

function checkEmail(email) { 
    /* 
     original parts of the function here! 
    */ 

    if (email.length) { 
     $.getJSON('ajax/validate', {email: email}, function(data){ 
      if (data == false) { 
       // stuff 
      } 
      checkEmailResponse(data); 
     }) 
    } 
} 

function checkEmailResponse(data) 
{ 
    // do something with the data. 
} 

Answer 2

Vous pourriez avoir le bloc fonctionnel parent jusqu'à ce qu'il y a quelque chose. Et pour réduire l'intensité du processeur, vous pouvez utiliser un délai d'attente.

function checkEmail(email) { 
if (email.length) { 
    var ret = null; 
    $.getJSON('ajax/validate', {email: email}, function(data){ 
     if (data == false) { 
      // stuff 
     } 
     ret = data; 
    }) 
    while(ret == null){ 

    } 
    return ret; 
} 

}

Hope this helps.

Answer 3

Vous devrez juste changer votre façon d'aborder le problème. Vous savez que ce que vous avez ci-dessus ne fonctionnera pas, donc vous ne pouvez pas penser en termes de "appeler une fonction et opérer sur sa valeur de retour".

Vous devrez passer à quelque chose comme la suggestion de tops de CPS, ou en fonction de ce qui déclenche cette fonction, le manipuler avec des événements personnalisés.

Answer 4

Vous devriez aussi utiliser un rappel car l'appel est asynchrone et donc vous concevoir toute la source JavaScript autour de cette idée (comme les autres l'ont souligné). Si vous avez vraiment besoin de l'obtenir comme valeur de retour, vous devez désactiver l'appel asynchrone, mais ce n'est pas recommandé du tout, car il bloque la page jusqu'à ce que la réponse soit là.

function checkEmail(email, callback) { 
    if (email.length) 
    return $.ajax({ 
     data: {email: email}, 
     url: 'ajax/validate', 
     async: false 
    }).responseText; // only the raw response text of the XMLHttpRequest 
    } 
}