在调用

Question

我输入了一个用户名。输入时，我会检查后面的代码中是否有用户名。 在检查时，想法是要有一个微调器。

这是我的代码：

＆＃13;

＆＃13;

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

＆＃13;

.nobr {
  white-space: nowrap
}

#chkunspin {
  display: none;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这是我的问题： 微调器在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

输入字段保持焦点，因此从不触发该功能。

代码没有问题