Jquery Использовать addclass в форме отправки с ajax

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

Синхронные запросы могут временно блокировать браузер, отключая любые действия, когда запрос активен.

Пока $. AddClass () является синхронным, css применяются с небольшой задержкой вбраузер, и когда синхронизация вызова ajax завершена, браузер заблокирован и не может перерисовать новый внешний вид CSS.

Обходным решением может быть как задержать вызов ajax в setTimeout, так и сделать асинхронный вызов ajax, которыйможет решить проблему.

Answer 2

Проблема здесь:

async: false

С одной стороны, это устарело (или, по крайней мере, быстро устарело?) И вряд ли будет поддерживаться в последних или будущих обновлениях браузера. Во-первых, это всегда было плохой практикой, и ваш код противоречит принципам JavaScript. Не используйте его.

Но ближе к точке , он явно указывает вашему браузеру, чтобы эта асинхронная операция была блокирующим вызовом . Это означает, что браузер не может обновлять пользовательский интерфейс до завершения операции. Изменение класса элемента DOM является обновлением пользовательского интерфейса. Сам базовый DOM обновляется, но браузер не может отобразить это изменение на экране, пока все операции блокировки не будут завершены.

Сделайте асинхронные операции асинхронными. Удалить async: false. Это позволит браузеру создавать обновления пользовательского интерфейса, которые вы хотите.

Если есть какая-то другая причина, по которой вы думаете, , вам нужно , чтобы использовать async: false, то это реальная проблема, которую вам нужно решить. В настоящее время ваш код просто скрывает эту проблему, создавая другую проблему.