Code placé AVANT qu'un appel Ajax soit exécuté APRÈS l'appel

Question

J'ai une entrée pour entrer un nom d'utilisateur. En tapant, je vérifie si le nom d'utilisateur est disponible dans le code derrière. Lors de la vérification, l'idée est d'avoir un spinner.

Voici mon code:

function loginexistscheck() { 
 
    console.log("checking"); 
 
    $('#chkunspin').show(); 
 
    //document.getElementById("chkunspin").style.display = "block"; 
 
    var username = document.getElementById("username").value 
 
    if (!username == "") { 
 
    $.ajax({ 
 
     type: "POST", 
 
     url: "Register.aspx/loginexistscheck", 
 
     data: '{newUserName: "' + username + '" }', 
 
     contentType: "application/json; charset=utf-8", 
 
     dataType: "json", 
 
     success: function(response) { 
 
     var mesg = document.getElementById("loginavailability"); 
 
     switch (response.d) { 
 
      case "false": 
 
      mesg.style.color = "green"; 
 
      mesg.innerHTML = "Disponible"; 
 
      break; 
 
      case "true": 
 
      mesg.style.color = "red"; 
 
      mesg.innerHTML = "Non disponible"; 
 
      break; 
 
      case "error": 
 
      mesg.style.color = "red"; 
 
      mesg.innerHTML = "Error"; 
 
      break; 
 
     } 
 
     //document.getElementById("chkunspin").style.display = "none"; 
 
     }, 
 
     failure: function(response) { 
 
     alert(response.d); 
 
     } 
 
    }).done(function() { 
 
     // hide spinner 
 
     $('#chkunspin').hide(); 
 
    }); 
 
    } else { 
 
    var mesg = document.getElementById("loginavailability"); 
 
    mesg.style.color = "red"; 
 
    mesg.innerHTML = "Le nom d'utilisateur est requis."; 
 
    }; 
 
}

.nobr { 
 
    white-space: nowrap 
 
} 
 

 
#chkunspin { 
 
    display: none; 
 
}

<div class="nobr"> 
 
    <input type="text" id="username" class="form-control" placeholder="Nom d'utilisateur" onchange="loginexistscheck()" required /> 
 
    <img src="../images/ajax-loader-un.gif" id="chkunspin" /> 
 
</div> 
 
<span id="loginavailability"></span>

Voici mon problème: La fileuse ne démarre pas après l'appel Ajax se termine. Je l'ai confirmé avec l'appel de console.log.

Une idée de ce qui se passe ici?

EDIT:

Nettoyé Code

function loginexistscheck() { 
    $('#chkunspin').show(); 
    console.log("checking"); 
    var username = $("#username").val(); 
    if (!username == "") { 
     $.ajax({ 
      type: "POST", 
      url: "Register.aspx/loginexistscheck", 
      data: '{newUserName: "' + username + '" }', 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (response) { 
       console.log(response.d); 
       var mesg = $("#loginavailability"); 
       switch (response.d) { 
        case "false": 
         mesg.css("color", "green"); 
         mesg.html("Disponible"); 
         break; 
        case "true": 
         mesg.css("color", "red"); 
         mesg.html("Non disponible"); 
         break; 
        case "error": 
         mesg.css("color", "red"); 
         mesg.html("Error"); 
         break; 
       } 
      }, 
      error: function (response) { 
       alert(response.d); 
      } 
     }).done(function() { 
      // hide spinner 
      $('#chkunspin').hide(); 
     }); 
    } else { 
     var mesg = $("#loginavailability"); 
     mesg.css("color", "red"); 
     mesg.html("Le nom d'utilisateur est requis."); 
    }; 
} 

Pour des fins d'essai, j'ai ajouté un console.log sur l'appel de succès. Par conséquent, j'ai la vérification avant le vrai sur la console, mais ils sont tous les deux enregistrés en même temps. L'appel Ajax prend environ 30 secondes ou plus.

Le problème persiste: pourquoi le spinner n'est-il pas affiché (ni le journal de contrôle) avant l'appel d'Ajax?

Answer 1

Le champ de saisie a conservé le focus, ce qui n'a jamais déclenché la fonction.

Il n'y a pas de problème avec le code