JavaScript continue avant la fin de la fonction !? Ajax confusion asynchrone et solution

Question

J'ai un problème. La fonction ci-dessous fonctionne à 100%, mais l'instruction if qui appelle la fonction se résout avant que la fonction renvoie son résultat!

L'alerte pour "test2" montrera AVANT l'alerte avec le résultat "+". Quelle est la raison?

(le problème qu'il résout toujours à faux, peu importe ce que parce que rien ne retourne même quand quelque chose va être de retour!)

function checkUsername (username) { 
     $.post("ajax_messages.php",{ 
      func: "checkUsername", 
      username: username 
     }, function(data){ 
      alert("result: "+data); 
      return data; 
     }); 
    } 

    $('.send').click(function() { 
     if (checkUsername($receiverBox.val()) == "true") { 
      alert("test"); 
      return false; 
     } else { 
      alert("test2"); 
      return false; 
     } 
    }); 

Edit:

Merci pour les réponses rapides. J'ai essayé ce qui suit:

$.ajaxSetup({ 
     async:false 
    }); 

Édition2: Mais cela n'a pas non plus agi comme prévu. Comme un ensemble normal de fonctions serait donc je devrais agir. Donc, je vais essayer quelques-unes des méthodes ci-dessous

Édition3: Succès! C'est parfait. Un peu maladroit mais beaucoup plus lisse que toute autre méthode que j'ai pu trouver. J'espère que cela aide

var checkUsernameResult = false; 

    function checkErrorCheckingIsComplete() { 
     if (checkUsernameResult != false) { 
      alert(checkUsernameResult); 
     } 
    } 

    function checkUsername (username) { 
     $.post("ajax_messages.php",{ 
      func: "checkUsername", 
      username: username 
     }, function(data){ 
      alert("result: "+data); 
      checkUsernameResult = data; // each check has one of these 
      checkErrorCheckingIsComplete(); // all checks have this as the end 
     }); 
    } 

    $('.send', $message_box).click(function() { 
     checkUsername($receiverBox.val()); 
     //more checks here 
     return false; 
    }); 

Answer 1

Je pense vous devrez peut-être créer un autre bouton qui effectue l'envoi, car vous n'aurez jamais la réponse avec les fonctions asynchrones d'Ajax.

Ajouter un autre bouton sur votre page HTML avec une classe « -send », puis essayer ...

var asynchResult = "false"; 
function checkUsername (username) { 
    $.post("ajax_messages.php",{ 
     func: "checkUsername", 
     username: username 
    }, function(data){ 
     alert("result: "+data); 
     asynchResult = data; 
     $('.actual-send').trigger('click'); 
    }); 
} 

$('.send').click(function() { 
    checkUsername($receiverBox.val()) 
    return false; 
} 
$('.actual-send').click(function() { 
    if(asynchResult == "true") { 
     alert("test"); 
     return true; 
    } else { 
     alert("test2"); 
     return false; 
    } 
} 

Answer 2

Depuis les appels AJAX sont asynchronous cela se produit. Utilisez une fonction de rappel pour .post et placez l'instruction if dans cela.

L'autre chose que vous pouvez faire est d'utiliser des appels synchrones. Mais cela empêchera le navigateur d'exécuter toute autre action dans l'intervalle.

Answer 3

Je n'ai pas utilisé jQuery depuis quelques mois, mais je suis assez sûr que vous pouvez définir un indicateur pour forcer l'appel Ajax à se produire comme un appel synchrone.

Answer 4

vous pouvez utiliser ce qui suit:

 
$.ajax({ 
    type: 'POST', 
    url: 'ajax_messages.php', 
    data: data, 
    success: function(html){ 
    alert(html); 
    } 
    dataType: dataType 
}); 

donc, à exécuter le succès POST fonction qui saisit quel que soit votre ajax_messages.php fera l'écho et des alertes avec elle

Answer 5

mis asynchrone: false

Answer 6

Comme les autres réponses ont dit, la méthode post() est asynchrone il exécute indépendamment du reste du code.

Si nécessaire, vous pouvez forcer jquery à appeler le serveur de façon synchrone en utilisant async:false à la place, je pense que vous devrez utiliser la fonction jQuery.ajax() à la place du raccourci .post() pour le faire.

En général, cela fonctionne beaucoup mieux de manière asynchrone, car en mode synchrone, la page Web sera gelée pendant l'attente de la réponse du serveur - ce qui n'est pas une excellente expérience pour vos visiteurs. Une meilleure idée est de le garder en mode asynchrone et de gérer la réponse du serveur dans le rappel de la méthode success().