Скрыть() и показать() методы jQuery не работают достаточно быстро

Question

Я хочу запустить вызов ajax при нажатии кнопки отправки. И в то же время я просто хочу скрыть кнопку отправки и показать изображение gif до завершения ajax. Но кнопка отправки занимает некоторое время, чтобы скрыть после ее нажатия. Я не знаю, но почему ???

function exemptProductAjaxCall() { 
 
     $("#delistSubmit").hide("fast"); 
 
     $("#edit-icon").show("fast"); 
 
     var days, pId, remarks; 
 
     days = $("#exemptDays").val(); 
 
     pId = $('#exempPid').val(); 
 
     remarks = $("#remarks").val(); 
 
     pIdParam = [pId]; 
 
     $.ajax({ 
 
      type: "POST", 
 
      url: "abc.php", 
 
      cache: false, 
 
      async: false, 
 
      data: {dispatch: 'myphp.pidExempt', pIds: pIdParam, exemptDays: days, remarks: remarks, callAjax: 1}, 
 
      error: function (data, textStatus, jqXHR) 
 
      { 
 
       //error msg 
 
       var err = eval("(" + data.responseText + ")"); 
 
       alert('Ajax Error: ' + err.Message); 
 
      } 
 
     }).done(function (msg) { 
 
      var resPonse = JSON.parse(msg); 
 
      if (resPonse['success'] == 1) 
 
      { 
 
       alert('Success: ' + resPonse['message']); 
 
       $("#exemptDays").val(1); 
 
       $('#exempPid').val(''); 
 
       $("#remarks").val(''); 
 
      } else 
 
      { 
 
       if (typeof resPonse['message'] === 'undefined') 
 
        alert('Error: Unknown Error'); 
 
       else 
 
        alert('Error: ' + resPonse['message']); 
 
      } 
 
     }); 
 
     $("#edit-icon").hide(); 
 
     $("#delistSubmit").show(); 
 
    }

<input type="button" id="delistSubmit" value="Submit" onClick="exemptProductAjaxCall();" style="padding-bottom: 41px;"> 
 
<img id="edit-icon" style="-webkit-user-select:none;height:36px;width:36px;float:left;margin-right:40px;display:none;" src="banners/ajax-load-black.gif">

Answer 1

Если я не ошибаюсь, вы указываете асинхр = False, что означает вызов Ajax будет происходить в потоке пользовательского интерфейса. Это заблокирует пользовательский интерфейс, пока вызов не будет завершен. Поскольку скрытие и показ не имеют никакого эффекта сразу, это означает, что анимация будет запускаться/продолжаться только после вызова ajax.

Использование синхронизации ajax-звонки - это анти-шаблон, и Chrome предупредит вас об этом. Поскольку у вас есть обратные вызовы, нет абсолютно ничего, чтобы получить асинхронное: false. Я рекомендую удалить его - см., Если это вообще поможет.

Вторая проблема заключается в том, что вы вызываете снова показывать и прятать сразу в конце функции. Это должно быть в конце выполненного обратного вызова.

Таким образом, конечный результат должен быть:

// hide/show before ajax call 
$("#delistSubmit").hide("fast"); 
$("#edit-icon").show("fast"); 

$.ajax({}) 
    .done(function() { 


    // show/hide at the end of callback 
    $("#edit-icon").hide(); 
    $("#delistSubmit").show(); 
    }); 

И опять же, не установлено асинхронной ложь - см answers to this question.

Answer 2

Попробуйте использовать миллисекунды $("#delistSubmit").hide(1000);. Эта анимация будет длиться 1000 мс (1 секунда). Если вы хотите сделать это быстрее, просто уменьшите количество миллисекунд.

Answer 3

Согласно документации:

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

Обратите внимание, что .hide() запускается немедленно и переопределяет очередь анимации , если не указана длительность или длительность 0.

Так fast означает 200 millisecond S вы можете уменьшить его в нечто вроде 100, чтобы сделать его более быстрее, если вы хотите.

Docs