在 Ajax 調用之前放置的代碼在調用之后執行

Question

我有一個輸入來輸入用戶名。 打字時，我檢查用戶名是否在后面的代碼中可用。 在檢查時，我們的想法是有一個微調器。

這是我的代碼：

 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>

這是我的問題：微調器確實在 Ajax 調用完成后啟動。 我通過 console.log 調用確認了這一點。

知道這里發生了什么嗎？

編輯：

清理過的代碼

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.");
    };
}

出於測試目的，我在成功調用中添加了一個 console.log。

結果，我確實在控制台上的 true 之前進行了檢查，但它們同時被記錄。 Ajax 調用大約需要 30 秒左右。

問題仍然存在：為什么在調用 Ajax 之前不顯示微調器（也不顯示檢查日志）？

Answer 1

輸入字段保持焦點，因此永遠不會觸發該功能。

代碼沒有問題