javascript - Jquery 使用 ajax 在提交表单中使用 addclass

Question

提交表单时，我需要运行 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) {

Answer 1

问题就在这里:

async: false

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

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

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

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