在调用之后执行 Ajax 调用之前放置的代码答案

【问题标题】：Code placed BEFORE an Ajax call is executed AFTER the call在调用之后执行 Ajax 调用之前放置的代码
【发布时间】：2017-10-03 23:17: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.";
  };
}

.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 之前没有显示微调器（也没有显示检查日志）？

【问题讨论】：

注意，failure 不是定义的jQuery.ajax() 选项
您的代码清楚地使微调器可见在发出Ajax 请求之前。但是，例如，当username 为空时，它不会隐藏微调器。（此外，您的 jQuery 和传统 DOM 操作的混合奇怪地不一致。如果您有 jQuery，请使用它。当您可以使用 document.getElementById('foo') 时，无需使用 $('#foo')。更改 CSS 属性或设置元素也是如此文本。）
我发现 jQuery 和常规 DOM 的混合令人反感和困惑。
我同意 cmets 关于混合使用 DOM 和 JQuery 的观点。尽管如此，它应该对原始问题没有影响......另外，当用户名为空时不会调用调用......我应该尝试 beforeSend:on the call 吗？
一般提示，因为这是我最好的猜测为什么你的代码看起来那样。不要复制和粘贴你在某处找到的代码，然后敲打它直到它有点工作。您在某处找到的任何代码（甚至是文档中的代码示例）都需要从头开始重写。如果了解它的作用，那么您自己重写它应该很容易。如果你不明白它的作用，你必须把它拆开，直到你明白为止。没有任何借口可以将您没有编写的代码混在一起，然后想知道为什么它没有完全按照您的意愿行事。

标签： javascript ajax spinner

【解决方案1】：

输入字段保持焦点，因此永远不会触发函数。

代码没有问题

【讨论】：