ajax导致css样式改变延迟----有用请拿走~~~

<span class="btn btn-blue" id="get_mobile_code_btn" οnclick="getOne()" />点击获取短信验证码</span>

第一种写法

<script>
    function getOne() {
        var user_account = $("#user_account").val();
        if (user_account == 0) {
            alert("请输入手机号！");
            return false;
        }

        if (!(/^1[3456789]\d{9}$/.test(user_account))) {
            alert("手机号码有误，请重填！");
            return false;
        }       

       //此处想锁定点击按钮

       $("#get_mobile_code_btn").attr("disabled",true);
        $("#get_mobile_code_btn").text("正在发送中");
        $("#get_mobile_code_btn").removeAttr("onclick");

     $.ajax({
            type: "post",
            url: "请求地址",
            async: false,
            data: {
                user_account: user_account
            },
            contentType: "application/json",
            dataType: "json",
            success: function (result) {
                if(result.status==200){

                        //获取验证码倒计时60s
                        sendMsg(60);

                } else {
                    alert(result.msg);
                    sendMsg(0)
                }
            }
        });
    }

//倒计时方法
    function sendMsg(time){
        if(time==0){//重新获取验证码
            $("#get_mobile_code_btn").attr("disabled",false);
            $("#get_mobile_code_btn").text("点击获取短信验证码");
            $("#get_mobile_code_btn").attr("onclick","getOne()");
            time = 60;
            return false;//清除定时器
        }else{
            $("#get_mobile_code_btn").attr("disabled",true);
            $("#get_mobile_code_btn").text("重新发送("+time+")");
            $("#get_mobile_code_btn").removeAttr("onclick");
            time--;
        }
        //设置一个定时器
        setTimeout(function(){
            sendMsg(time)
        },1000)
    }

这种写法会出现css样式延迟现象，在ajax响应之前不会出现 ’正在发送‘，导致延迟的感觉

 

改成第二种写法

<script>
    function getOne() {
        var user_account = $("#user_account").val();
        if (user_account == 0) {
            alert("请输入手机号！");
            return false;
        }

        if (!(/^1[3456789]\d{9}$/.test(user_account))) {
            alert("手机号码有误，请重填！");
            return false;
        }

        $("#get_mobile_code_btn").attr("disabled",true);
        $("#get_mobile_code_btn").text("正在发送中");
        $("#get_mobile_code_btn").removeAttr("onclick");
        setTimeout(function(){
            aAjax(user_account)
        },10)
    }

    function aAjax(user_account){
        $.ajax({
            type: "post",
            url: "请求地址",
            async: false,
            data: {
                user_account: user_account
            },
            contentType: "application/json",
            dataType: "json",
            success: function (result) {
                if(result.status==200){

                      //获取验证码倒计时60s

                   sendMsg(60);

                } else {
                    alert(result.msg);
                    sendMsg(0)
                }
            }
        });
    }
    function sendMsg(time){
        if(time==0){//重新获取验证码
            $("#get_mobile_code_btn").attr("disabled",false);
            $("#get_mobile_code_btn").text("点击获取短信验证码");
            $("#get_mobile_code_btn").attr("onclick","getOne()");
            time = 60;
            return false;//清除定时器
        }else{
            $("#get_mobile_code_btn").attr("disabled",true);
            $("#get_mobile_code_btn").text("重新发送("+time+")");
            $("#get_mobile_code_btn").removeAttr("onclick");
            time--;
        }
        //设置一个定时器
        setTimeout(function(){
            sendMsg(time)
        },1000)
    }
</script>

 

</script>