Hide() and show() methods of jQuery not working fast enough

Question

I want to fire an ajax call on submit button click. And at the mean time I just want to hide the submit button and show a gif image till the ajax is done. But the submit button is taking some time to hide after it has been clicked. I don't know but why ???

 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">

what happen if you delete everything from exemptProductAjaxCall() except $("#delistSubmit").hide("fast"); and $("#edit-icon").show("fast")? still slow? — Nico, Feb 13 '17 at 18:13

score 0 · Answer 1 · answered Feb 13 '17 at 18:06

0

Try using milliseconds $("#delistSubmit").hide(1000);. This animation will last 1000ms (1 second). If you want to make it faster just lower the number of milliseconds.

answered Feb 13 '17 at 18:06

Monika Bozhinova

294
3
16

It will still be lesser than fast as fast is 200 only. – squiroid Feb 13 '17 at 18:09

score 0 · Answer 2 · answered Feb 13 '17 at 18:08

As per docs:

Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively.

Note that .hide() is fired immediately and will override the animation queue if no duration or a duration of 0 is specified.

So fast means 200 milliseconds you can reduce it to something like 100 to make it more faster if you want.

Docs

score 0 · Accepted Answer · edited May 23 '17 at 12:32

Unless I'm mistaken, you're specifying async = false which means the ajax call will happen on the UI thread. This will block the UI until the call is complete. Since hide and show don't have any effect right away, this means that the animation will only start/continue after the ajax call.

Using sync ajax calls is an anti pattern and Chrome will warn you about this. Since you have callbacks there is absolutely nothing to gain by having async:false in there. I recommend removing it - see if that helps at all.

Second problem is that you're calling again show and hide immediately at the end of the function. This should be at the end of the done callback.

So the end result should be:

// 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();
  });

And again, don't set async to false - see answers to this question.

$("#delistSubmit").hide("fast"); $("#edit-icon").show("fast"); should have executed before the ajax call i suppose ??? — 65th bit, Feb 20 '17 at 08:09

Hide() and show() methods of jQuery not working fast enough

3 Answers3