Wie kann das Problem der angehaltenen Browseranimation gelöst werden, die durch eine js-Ajax-Synchronisierungsanforderung verursacht wird?

Dieser Artikel stellt Ihnen hauptsächlich einen Artikel zur Lösung des Problems der Browser-Animation vor, die durch eine js-Ajax-Synchronisierungsanforderung verursacht wird. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich ist. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

1. Die Ursache des Problems

Als ich heute eine Anfrage gestellt habe, gibt es eine Funktion, mit der die Benutzeroberfläche aktualisiert werden kann Aktuelle Punkte. Dies ist definitiv Wir müssen die Synchronisierungsanforderung von Ajax verwenden. Ich habe damals drei Klicks, fünf Divisionen und zwei geschrieben und gespielt Ich dachte, dass eine so einfache Funktion in Ordnung wäre, wenn ich sie einfach schreibe. Als der Benutzer auf die Schaltfläche „Aktualisierungspunkte“ klickte, wurde die Kopie nicht auf „Aktualisieren“ geändert, aber die Ajax-Anfrage wurde gesendet Ich habe den Webseitencode überprüft und festgestellt, dass js die Kopie tatsächlich an das HTML-Element onclick gebunden hat. Das Ereignis wurde entfernt und wieder in das Original geändert, aber die Kopie auf der Seite hat sich nicht geändert Ich weiß nicht, warum sich der HTML-Code geändert hat, aber die Seite hat sich nicht geändert.

/**
  * 异步当前用户积分 by zgw 20161216
  * @return {[type]} [description]
 */
 function flushIntegralSum() {
　　　　　//点击按钮刷新前修改按钮的文案，已经去掉点击事情，防止多次点击
  $("#flushbutton").replaceWith('<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>');
  $.ajax({
   url:'URL',
   type:'post',
   async:false,
   // data:{},
   success:function(json){
    json = eval('('+json+')');
    if(json.url){window.location.href=json.url;return;}
    $("#flushbutton").replaceWith('<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>');
    if(json.code!=1){
     alert(json.msg);
    }else{
     $("#free_sum").html(json.free_sum);
    }
    return;
   }
  });
 }

2. Ursache des Problems verstehen

Ursache des Problems: Ich habe es damals und schließlich untersucht Ich habe herausgefunden, dass es sich um ein Problem mit „async:false“ handelt. Wenn ich es in „asynchron“ ändern würde, gäbe es kein Problem. Warum verursacht eine synchrone Anfrage einen Codefehler?

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ösung des Problems

1. Ich habe setTimeout verwendet, um das Problem zu lösen Wie folgt:

Der zweite Parameter von setTimeout wird auf 0 gesetzt und der Browser führt

function flushIntegralSum() {
　　　　　//点击按钮刷新前修改按钮的文案，已经去掉点击事情，防止多次点击
  $("#flushbutton").replaceWith('<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>');
  setTimeout(function(){
   $.ajax({
    url:'URL',
    type:'post',
    async:false,
    // data:{},
    success:function(json){
     json = eval('('+json+')');
     if(json.url){window.location.href=json.url;return;}
     $("#flushbutton").replaceWith('<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>');
     if(json.code!=1){
      alert(json.msg);
     }else{
      $("#free_sum").html(json.free_sum);
     }
     return;
    }
   });
  },0) 
 }

nach einer festgelegten Mindestzeit aus. Das Problem ist hier gelöst, aber Sie können es versuchen Sie müssen ein GIF-Bild öffnen, wenn Sie auf die Schaltfläche klicken. Das Bild dreht sich weiter, was darauf hinweist, dass es aktualisiert wird. Sie werden feststellen, dass das Bild zwar angezeigt wird, sich aber nicht bewegt. Dies liegt an der Synchronisierung Die Anforderung ist verzögert, blockiert jedoch weiterhin den UI-Thread während seiner Ausführung. 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 ist gleichbedeutend mit einer „leichten“ Asynchronisierung. Dann wird der Thread immer noch blockiert Vorgänge vor dem Senden der Anfrage

2. Verwenden Sie Deferred, um das Problem zu lösen

Verwandte Empfehlungen:

HTML5 WebWorkers-Beispielcodefreigabe, um Browser-Animationen zu verhindern

Extjs-Post-Methodenparameter-Sendemethode während der Ajax-Synchronisation request_extjs

Eine kurze Diskussion über Ajax-Anfragen und Browser-Caching

Das obige ist der detaillierte Inhalt vonWie kann das Problem der angehaltenen Browseranimation gelöst werden, die durch eine js-Ajax-Synchronisierungsanforderung verursacht wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!