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

尝试使用毫秒$("#delistSubmit").hide(1000);。此动画将持续1000毫秒（1秒）。如果你想让它更快，只需要减少毫秒数。

Answer 2

根据文档：

持续时间以毫秒为单位;值越高表示速度越慢   动画，而不是更快的动画。字符串＆＃39;快速＆＃39;并且“慢”＆＃39;可   提供的指示持续时间为200和600毫秒，   分别

请注意，.hide（）会立即触发并覆盖动画   如果没有指定持续时间或持续时间为0，则排队。

所以fast表示200 millisecond你可以将100缩小为public static Bitmap getResizedBitmap(String imagePath, int width, int height) { Bitmap bitmap = BitmapFactory.decodeFile(imagePath); Bitmap resizedBitmap = Bitmap.createScaledBitmap(bitmap, width, height, false); // Recycling the bitmap, because it's already used and not needed anymore bitmap.recycle(); return resizedBitmap; }以使其更快，如果你想要的话。

Docs

Answer 3

除非我弄错了，否则你指的是async = false，这意味着ajax调用将在UI线程上发生。这将阻止UI，直到调用完成。由于隐藏和显示不会立即产生任何影响，这意味着动画将仅在ajax调用后开始/继续。

使用sync ajax调用是一种反模式，Chrome会向您发出警告。由于你有回调，因此在那里使用async：false绝对没有任何好处。我建议删除它 - 看看是否有帮助。

第二个问题是你在函数结束时再次调用show和hide。这应该在完成回调的末尾。

所以最终结果应该是：

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

同样，不要将异步设置为false - 请参阅answers to this question。

隐藏（）和show（）jQuery方法工作不够快

3 个答案: