Browser-angehaltene Animation während des Ajax-Synchronisierungsvorgangs (ausführliches Tutorial)

Im Folgenden werde ich einen Artikel mit Ihnen teilen, um das Problem der Browser-Animation zu lösen, die durch eine js-Ajax-Synchronisierungsanforderung verursacht wird. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

1. Die Ursache des Problems

Als ich heute eine Anfrage gestellt habe, bin ich auf eine solche Situation gestoßen, das heißt, es gibt eine Klicken Sie auf die Schaltfläche, um die aktuellen Punkte des Benutzers zu aktualisieren. Dies erfordert auf jeden Fall die Verwendung von drei, fünf und zwei folgt:

/**
  * 异步当前用户积分 by zgw 20161216
  * @return {[type]} [description]
 */
 function flushIntegralSum() {
　　　　　//点击按钮刷新前修改按钮的文案，已经去掉点击事情，防止多次点击
  $("#flushbutton").replaceWith(&#39;<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="flushbutton">正在刷新</a>&#39;);
  $.ajax({
   url:&#39;URL&#39;,
   type:&#39;post&#39;,
   async:false,
   // data:{},
   success:function(json){
    json = eval(&#39;(&#39;+json+&#39;)&#39;);
    if(json.url){window.location.href=json.url;return;}
    $("#flushbutton").replaceWith(&#39;<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="flushFreeSum();" id="flushbutton">刷新积分</a>&#39;);
    if(json.code!=1){
     alert(json.msg);
    }else{
     $("#free_sum").html(json.free_sum);
    }
    return;
   }
  });
 }

Ich dachte, es wäre eine so einfache Funktion. Schreiben Sie sie einfach und es wird funktionieren. Als der Benutzer jedoch auf die Schaltfläche „Aktualisierungspunkte“ klickte, wurde die Kopie nicht geändert auf „Aktualisieren“, aber die Ajax-Anfrage wurde gesendet, also habe ich den Webseitencode überprüft und festgestellt, dass js tatsächlich die Kopie des an das HTML-Element gebundenen Onclick-Ereignisses entfernt und wieder auf das Original geändert hat, nachdem die Anfrage erfolgreich war. aber die Kopie auf der Seite hat sich damals nicht geändert. Ich weiß nicht, warum sich der HTML-Code geändert hat, aber die Seite hat sich nicht geändert.

2 Ursache des Problems

Die Wurzel des Problems: Ich habe damals nachgeforscht und schließlich festgestellt, dass es sich um ein „async:false“-Problem handelte, also habe ich es in „Es liegt kein Problem“ geändert Wenn es asynchron ist, warum führt eine synchrone Anforderung dann zu Codefehlern?

Ursache: Der Rendering-Thread (UI) des Browsers und der JS-Thread schließen sich gegenseitig aus. Wenn zeitaufwändige JS-Vorgänge ausgeführt werden, wird das Rendern der Seite blockiert. Es gibt kein Problem, wenn wir asynchrones Ajax ausführen, aber wenn es auf eine synchrone Anforderung eingestellt ist, werden andere Aktionen (der Code hinter der Ajax-Funktion und der Rendering-Thread) gestoppt. Selbst wenn meine DOM-Operationsanweisung im Satz steht, bevor die Anforderung initiiert wird, blockiert diese Synchronisierungsanforderung den UI-Thread „schnell“, ohne ihm Zeit zur Ausführung zu geben. Aus diesem Grund schlägt der Code fehl.

3. Lösen Sie das Problem

1. Ich habe setTimeout verwendet, um das Problem zu lösen, den Ajax-Code in sestTimeout eingefügt und den Browser neu starten lassen Ein zu bedienender Thread löst das Problem. Der Code lautet wie folgt:

function flushIntegralSum() {
　　　　　//点击按钮刷新前修改按钮的文案，已经去掉点击事情，防止多次点击
  $("#flushbutton").replaceWith(&#39;<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="flushbutton">正在刷新</a>&#39;);
  setTimeout(function(){
   $.ajax({
    url:&#39;URL&#39;,
    type:&#39;post&#39;,
    async:false,
    // data:{},
    success:function(json){
     json = eval(&#39;(&#39;+json+&#39;)&#39;);
     if(json.url){window.location.href=json.url;return;}
     $("#flushbutton").replaceWith(&#39;<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="flushFreeSum();" id="flushbutton">刷新积分</a>&#39;);
     if(json.code!=1){
      alert(json.msg);
     }else{
      $("#free_sum").html(json.free_sum);
     }
     return;
    }
   });
  },0) 
 }

Der zweite Parameter von setTimeout ist auf 0 gesetzt und der Browser führt ihn nach einer festgelegten Mindestzeit aus

Das Problem ist hier gelöst, aber Sie können es versuchen. Wenn Sie beim Klicken auf die Schaltfläche ein GIF-Bild anzeigen müssen und das Bild sich weiter dreht, werden Sie dazu aufgefordert Sie werden feststellen, dass das Bild aktualisiert wird, das Bild jedoch nicht verschoben wird. Dies liegt daran, dass die Synchronisierungsanforderung während der Ausführung dennoch blockiert wird. Diese Blockierung ist so großartig, dass sich selbst das GIF-Bild nicht bewegt und wie ein statisches Bild aussieht. Die Schlussfolgerung liegt auf der Hand. setTimeout behandelt die Symptome, aber nicht die Grundursache. Dies entspricht einer „leichten“ Asynchronisierung. Dann wird der Thread immer noch blockiert Operationen vor dem Senden der Anfrage

2. Verwenden Sie Deferred zum Lösen

Das Obige habe ich für alle zusammengestellt, ich hoffe, es wird hilfreich sein an alle in der Zukunft.

Verwandte Artikel:

Wie implementiert man benutzerdefinierte Anweisungen in Vue?

So ändern Sie den Unterkomponentenstil über die übergeordnete Komponente in Vue

Bezieht sich auf domänenübergreifende JSONP-Probleme in Vue-Ressource

Wie implementiert man das asynchrone Laden von Komponenten in vue+webpack?

Verwenden Sie Nginx in vue.js, um domänenübergreifende Probleme zu lösen

So finden Sie die maximale gemeinsame Teilzeichenfolge in JavaScript

So implementieren Sie die automatische Recyclingverbindung für MySQL-Transaktionen in Node.js

Das obige ist der detaillierte Inhalt vonBrowser-angehaltene Animation während des Ajax-Synchronisierungsvorgangs (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!