Exécution séquentielle des commandes en Javascript

Question

J'apprécierais toutes les suggestions pour que cela soit résolu.

J'utilise une fonction JS checkAvailability() pour confirmer si un groupe est disponible pour l'ajout à une base de données. (Pour certaines raisons, les contraintes de clé de base de données n'ont pas été appliquées) En faisant cela, parfois ma fonction retourne même avant de recevoir la sortie du fichier PHP.

Donc, je reçois un résultat mixte. Lorsque la sortie du fichier PHP est reçue, elle affiche le résultat correct. Mais le reste du temps ça retourne juste faux.

Des pointeurs sur la façon dont cela peut être corrigé? Le code suivant:

Merci, Vish

// fonction pour vérifier la disponibilité nomdugroupe

function checkAvailability(){ 
     var grpname = $('#groupname').val(); 
     var isAvailable = false 

     //use ajax to run the check 
     $.post("checkGroupName.php", { gname: grpname }, 
      function(result){ 
       if(Number(result) == 0){ 
        //show that the groupname is available 
        isAvailable = true ; 
        $('#username_availability_result').html(grpname + ' is Available'); 
       } 
       else{ 
        //show that the groupname is NOT available 
        isAvailable = false ; 
        $('#username_availability_result').html(grpname + ' is already taken'); 

       } 
     }); 

    alert("isAvailable : "+isAvailable); 
    return isAvailable ; 
} 

fichier checkGroupName.php

$gname = $_POST['gname']; 
$query = "SELECT * FROM groups WHERE group_name='$gname'"; 
$result = mysql_query($query); 
if(mysql_num_rows($result)){   
    echo 1; 
else 
    echo 0; 

Answer 1

le problème est que $.post envoie la demande de manière asynchrone et ainsi le reste de la morue e est exécuté avant que la réponse arrive du serveur.

la solution est d'utiliser $.ajax() et de définir l'option asynchrone sur false afin que l'appel soit synchrone. quelque chose comme:

function checkAvailability(){ 
     var grpname = $('#groupname').val(); 
     var isAvailable = false 

     //use ajax to run the check 
     $.ajax({ 
       type: 'post', 
       url: 'checkGroupName.php', 
       dataType: 'json', 
       data: { gname: grpname }, 
       async: false, 
       success: function(result){ 
        if(Number(result) == 0){ 
        //show that the groupname is available 
        isAvailable = true ; 
        $('#username_availability_result').html(grpname + ' is Available'); 
       } 
       else{ 
        //show that the groupname is NOT available 
        isAvailable = false ; 
        $('#username_availability_result').html(grpname + ' is already taken'); 

       } 
     }); 

    alert("isAvailable : "+isAvailable); 
    return isAvailable ; 
} 

Answer 2

Votre fonction doit toujours être votre retour avant la demande ajax à la page PHP est terminée, parce que la demande ajax est asynchrone. Vous commencer dans votre fonction, mais il se termine après que les opérations réseau sont terminées. .post ne bloque pas l'attente du résultat.

Vous pouvez le faire bloquer à l'aide .ajax plutôt que .post avec l'option async: false, mais sur de nombreux navigateurs qui verrouille l'interface utilisateur d'une manière désagréable lors de la demande du réseau.

Au lieu de cela, demandez à votre fonction accepte un rappel qu'il appellera le résultat de l'opération:

function checkAvailability(callback) { 
    var grpname = $('#groupname').val(); 

    //use ajax to run the check 
    $.post("checkGroupName.php", { gname: grpname }, 
     function(result){ 
      if(Number(result) == 0){ 
       //show that the groupname is available 
       $('#username_availability_result').html(grpname + ' is Available'); 
       callback(true); 
      } 
      else{ 
       //show that the groupname is NOT available 
       $('#username_availability_result').html(grpname + ' is already taken'); 
       callback(false); 
      } 
    }); 
} 

code

qui sert à faire:

doSomething(); 
if (checkAvailability()) { 
    itsAvailableLetsDoSomething(); 
    moreAvailableStuff(); 
} 
else { 
    itsNotAvailableDoSomethingElse(); 
    otherStuff(); 
} 

... serait plutôt regarder comme ceci:

doSomething(); 
checkAvailability(function(available) { 
    if (available) { 
     itsAvailableLetsDoSomething(); 
     moreAvailableStuff(); 
    } 
    else { 
     itsNotAvailableDoSomethingElse(); 
     otherStuff(); 
    } 
}); 

Comme vous pouvez le voir, l'impact est minime, mais en faisant cela, vous prenez un Avantage de la communication asynchrone pour garder votre interface utilisateur sensible.

Answer 3

Vous pouvez essayer ce code

fonction

checkAvailability() {

var grpname = $('#groupname').val(); 
    var isAvailable = false 
    $.ajax({ 
     type: "POST", 
     url: "checkGroupName.php", 
     data: {grpname : grpname }, 
     success: function (result) { 
     if(Number(result) == 0){ 
       //show that the groupname is available 
       isAvailable = true ; 
       $('#username_availability_result').html(grpname + ' is Available'); 
      } 
      else{ 
       //show that the groupname is NOT available 
       isAvailable = false ; 
       $('#username_availability_result').html(grpname + ' is already taken'); 

      }} 
    }); 

}