jQueryのhide（）メソッドとshow（）メソッドが十分に速く動作しない

Question

送信ボタンをクリックすると、ajaxコールが発生します。その間、私は送信ボタンを隠し、Ajaxが完了するまでGIF画像を表示したいだけです。しかし、送信ボタンはクリックされた後に隠れるのに時間がかかります。私は知りませんが、なぜですか？

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

私が間違ってる場合を除き、あなたはAJAX呼び出しがUIスレッド上で発生することを意味している非同期= falseを指定しています。これにより、呼び出しが完了するまでUIがブロックされます。 hideとshowはすぐには何の効果もないので、アニメーションはajaxコールの後にのみ開始/継続することを意味します。

同期ajax呼び出しを使用することは反パターンであり、Chromeはこれについて警告します。あなたはコールバックを持っているので、非同期を得ることによって得ることは絶対にありません。そこにはfalseがあります。私はそれを取り除くことをお勧めします。

第2の問題は、機能の終了時にすぐに表示して非表示にすることです。これは完了コールバックの終了時に行う必要があります。

だから、最終的な結果は次のようになります。

// 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に設定していない非同期（async） - answers to this questionを参照してください。

Answer 2

ミリ秒$("#delistSubmit").hide(1000);を使用してみてください。このアニメーションは1000ms（1秒）持続します。それをより速くしたいのであれば、ミリ秒の数を減らすだけです。

Answer 3

ドキュメントあたりとおり

継続時間をミリ秒単位で与えられています。値が大きいほど、遅いアニメーションではなく、遅いアニメーションであることを示します。 'fast'と 'slow'という文字列は、それぞれ、 の持続時間を示すために、200ミリ秒と600ミリ秒の持続時間を示すように指定できます。

.hide（）は直ちに起動され、持続時間または0の継続時間が指定されていない場合は、アニメーション キューをオーバーライドすることに注意してください。

のでfastは、あなたがしたい場合は、それをより速くするために100のようなものにそれを減らすことができます200 millisecond秒を意味します。

Docs