在JavaScript中加载动画

我使用下面的代码来验证一些表单字段。我已经检测到来自服务器的响应需要几秒钟的时间，并且我将包含某种动画，该动画应该指示验证尚未完成

这是我正在使用的JavaScript：

<script type="text/javascript">
$(document).ready(function(){
console.log("principio");
//control de alias
    $("#alias").keyup(function(){

        var ID=$("#alias").val();
        var REST=$("#rest").val();

        $.post("check_username.php", { username: ID, rest: REST},

                function(result){
                    console.log(result);
                    //if the result is 1
                    if(result == 1){

                        document.getElementById('mensajealias').innerHTML ="Alias disponible";
                          document.getElementById('boton').style.visibility='visible'; // hide 
                             document.getElementById('mensajeboton').innerHTML ="Ahora puede insertar los datos";
                    }else{
                          document.getElementById('mensajealias').innerHTML ="Alias no disponible";
                           document.getElementById('boton').style.visibility='hidden'; // hide 
                             document.getElementById('mensajeboton').innerHTML ="No se puede insertar hasta que no modifique los datos";
                        exit;
                    }
            });
    });
//control de rest
    $("#rest").change(function(){
        var ID=$("#alias").val();
        var REST=$("#rest").val();

        $.post("check_username.php", { username: ID, rest: REST},
                function(result){
                    console.log(result);
                    //if the result is 1
                    if(result == 1){
                        document.getElementById('mensajealias').innerHTML ="Alias disponible";    
                        document.getElementById('boton').style.visibility='visible'; // hide 
                        document.getElementById('mensajeboton').innerHTML ="Ahora puede insertar los datos";

                    }else{

                          document.getElementById('mensajealias').innerHTML ="Alias no disponible";
                           document.getElementById('boton').style.visibility='hidden'; // hide 
                             document.getElementById('mensajeboton').innerHTML ="No se puede insertar hasta que no modifique los datos";
                        exit;
                    }
            });
    });
//control de nombre
    $("#nombre_mesero").keyup(function(){
        var Nombre=$("#nombre_mesero").val();
    });    
});
</script>

我还包括以下代码：

    // Ajax activity indicator bound to ajax start/stop document events
$(document).ajaxStart(function(){ 
  $('#ajaxBusy').show(); 
}).ajaxStop(function(){ 
  $('#ajaxBusy').hide();
});

---

现在，每次用户在$alias字段中输入角色时，动画都会在事件结束时开始和结束，但在第七个角色之后，动画不再停止……

您需要从以下内容开始 不要加载页面，而是将其绑定到事件，并在响应返回时禁用它。

---

从一些代码开始，然后询问它是否不起作用，而不是询问例如。

我没有看到任何动画@阿米贾法里，这正是我想要的，怎么做。谢谢。使用ajaxStart和ajaxComplete加载和卸载动画。请提供代码的JSFIDLE。Thx@JayBlanchard，我已用守则建议和问题更新了我的问题。我已用守则建议和问题更新了我的问题。谢谢。您是否检查了您的ajax请求是否第七次得到响应？您还需要提到调试和发现的内容。除此之外，首先，你不想这样做。在发送检查用户名可用性的请求之前必须有一些延迟，并且，除非至少有3个或更多字符，否则不要发送请求。您最好使用其他地方的一些示例代码。发布一些工作示例，其他人可以参考以帮助您，因为这样，您提供的调试信息并不多。现在已经解决了，谢谢。在我已经移除的第二个结果条件中有一条出口线，它正在工作。

    // Ajax activity indicator bound to ajax start/stop document events
$(document).ajaxStart(function(){ 
  $('#ajaxBusy').show(); 
}).ajaxStop(function(){ 
  $('#ajaxBusy').hide();
});