Question

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

$（'。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

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

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

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

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

Answer 2

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

$.addClass()是同步的，但是在浏览器中应用了CSS却有些延迟，并且在完成同步ajax调用时，浏览器被锁定并且无法重新绘制新的CSS外观。

一种解决方法是既可以延迟setTimeout中的ajax调用，也可以使ajax调用异步，从而可以彻底解决问题。

jQuery在带有Ajax的提交表单中使用addclass

2 个答案: