jQuery的hide（）和show（）方法工作不夠快

我想在點擊提交按鈕時觸發ajax調用。同時，我只想隱藏提交按鈕並顯示一個gif圖像，直到ajax完成。但提交按鈕點擊後需要一段時間才能隱藏。我不知道，但爲什麼？jQuery的hide（）和show（）方法工作不夠快

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

來源

2017-02-13 Sidhant Kushwaha

如果從exemptProductAjaxCall（）中除去$（「＃delistSubmit」），則會發生什麼情況。hide（「fast」）;和$（「＃edit-icon」）。show（「fast」）？仍然很慢？ –

除非我記錯了，你指定異步= false，這意味着Ajax調用會發生在UI線程上。這將阻止用戶界面直到通話完成。由於隱藏和顯示不會立即產生任何效果，這意味着動畫只會在ajax調用之後開始/繼續。

使用sync ajax調用是一種反模式，Chrome會向您發出警告。由於你有回調，因此在那裏有async：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。

來源

2017-02-14 16:00:42

$（「＃delistSubmit」）。hide（「fast」）; $（「＃編輯圖標」）顯示（「快」）。應該在ajax調用之前執行，我想呢？ –

我會編輯以清楚說明。 –

嘗試使用毫秒$("#delistSubmit").hide(1000);。該動畫將持續1000毫秒（1秒）。如果您想讓速度更快，只需降低毫秒數。

來源

2017-02-13 18:06:01

已經嘗試過。不工作。 –

它只會比200快，而不是200。 – squiroid

作爲每文檔：

延時時間是以毫秒爲單位的較高的值表示較慢的動畫，而不是較快的動畫。提供的字符串'fast'和'slow'可以是，分別表示持續時間爲200和600毫秒，分別爲。

請注意，如果沒有指定持續時間或持續時間爲0，則立即觸發.hide（）將覆蓋動畫隊列。

所以fast意味着200 millisecond是你可以把它降低到類似100做，如果你想了解更多更快。

Docs

來源

2017-02-13 18:08:15 squiroid

jQuery的hide（）和show（）方法工作不夠快

回答

相關問題