Hide() - und show() -Methoden von jQuery nicht schnell genug

Question

Ich möchte einen Ajax-Aufruf auf Senden klicken klicken. Und in der Zwischenzeit möchte ich einfach den Submit-Button ausblenden und ein Gif-Bild zeigen, bis der Ajax fertig ist. Der Absenden-Button benötigt nach dem Klicken etwas Zeit, sich zu verstecken. Ich weiß nicht, aber warum?

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

Wenn ich nicht irre, sind die Angabe Sie async = false, was bedeutet, die Ajax-Aufruf auf dem UI-Thread passieren wird. Dies wird die Benutzeroberfläche blockieren, bis der Anruf abgeschlossen ist. Da hide and show keine Wirkung haben, bedeutet dies, dass die Animation erst nach dem Ajax-Aufruf gestartet/fortgesetzt wird.

Die Verwendung von sync Ajax Calls ist ein Anti-Pattern und Chrome wird Sie davor warnen. Da Sie Rückrufe haben, gibt es absolut nichts zu gewinnen, wenn Sie async haben: false da drin. Ich empfehle es zu entfernen - sehen Sie, ob das überhaupt hilft.

Das zweite Problem ist, dass Sie am Ende der Funktion sofort wieder aufrufen und ausblenden. Dies sollte am Ende des Rückrufs erfolgen.

So sollte das Endergebnis sein:

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

Und wieder nicht async auf false gesetzt - siehe answers to this question.

Answer 2

Versuchen Millisekunden $("#delistSubmit").hide(1000); verwenden. Diese Animation dauert 1000ms (1 Sekunde). Wenn Sie es schneller machen möchten, verringern Sie einfach die Anzahl der Millisekunden.

Answer 3

Wie pro docs:

Dauern in Millisekunden angegeben werden; höhere Werte bedeuten langsamer Animationen, nicht schnellere. Die Zeichenfolgen 'schnell' und 'langsam' können sein, um die Dauer von 200 bzw. 600 Millisekunden anzugeben, .

Beachten Sie, dass .hide() sofort ausgelöst wird und die Animation Queue überschreibt, wenn keine Dauer oder eine Dauer von 0 angegeben ist.

So fast bedeutet 200 millisecond s Sie es so etwas wie 100 reduzieren kann, um es schneller, wenn Sie wollen.

Docs