Jquery在带有ajax的提交表单中使用addclass答案

【问题标题】：Jquery Use addclass in submit form with ajaxJquery在带有ajax的提交表单中使用addclass
【发布时间】：2019-01-02 13:26:11
【问题描述】：

提交表单时，我需要运行 addclass 并显示加载动画，然后运行 ajax 但是在 ajax 中添加 false 到 async 时，首先运行 ajax，然后加载 anamiatin 执行。

$('.form-login').submit(function(e) {

$('#alert-massages').html("").removeClass("alert alert-warning");
 $(".btn-login").addClass('loading');
 $(".btn-login").attr('disabled','disabled');

 if(formLogin.valid()) {

  $.ajax({
    url : "<%=checkOtpLoginUrl %>",
    dataType : "json",
    async: false,
    data : {
        "<%=renderResponse.getNamespace() %>msisdn" : $("#<%= renderResponse.getNamespace() %>msisdn").val(),
        "<%=renderResponse.getNamespace() %>password" : $("#<%= renderResponse.getNamespace() %>password").val(),
        "<%=renderResponse.getNamespace() %>captchaText" : $("#<%= renderResponse.getNamespace() %>captchaText").val(),
        "<%=renderResponse.getNamespace() %>rememberMe" : $("#<%= renderResponse.getNamespace() %>remember").val()},
    method : "post"

    }).done(function(data) {

        if (data.result) {

【问题讨论】：

首先，不要使用async: false。曾经。如果最近的浏览器更新甚至不支持它，我不会感到惊讶。更正后，问题是否仍然存在？
我需要使用异步：false
这不是问题。这是预期的行为。添加async:false（你应该永远这样做）强制你的代码是同步的，这意味着只要ajax调用没有完成，一切都会冻结（这就是你永远不应该使用它的原因），因此加载动画直到最后才会出现。为什么你需要使用async:false？什么原因？

标签： javascript jquery ajax

【解决方案1】：

问题就在这里：

async: false

一方面，这已被弃用（或至少很快被弃用？），并且不太可能在最近或未来的浏览器更新中得到支持。首先，这一直是不好的做法，并且会使您的代码违背 JavaScript 原则。不要使用它。

但更重要的是，它明确告诉您的浏览器将此异步操作设为阻塞调用。这意味着浏览器在操作完成之前无法执行任何 UI 更新。修改 DOM 元素的类是 UI 更新。底层 DOM 本身正在更新，但在所有阻塞操作完成之前，浏览器无法在屏幕上呈现该更改。

使您的异步操作异步。删除async: false。这将允许浏览器进行您希望它进行的 UI 更新。

如果你有一些其他原因认为你需要使用async: false，那么这就是你需要解决的实际问题。目前，您的代码只是通过创建另一个问题来隐藏该问题。

【讨论】：

【解决方案2】：

同步请求可能会暂时锁定浏览器，在请求处于活动状态时禁用任何操作。

虽然$.addClass() 是同步的，但在浏览器中应用 css 会有一点延迟，当同步 ajax 调用完成时，浏览器被锁定，无法重新绘制新的 css 外观。

解决方法可以是在 setTimeout 中延迟 ajax 调用或使 ajax 调用异步，这可以立即解决问题。

【讨论】：