Animation suspendue du navigateur lors de l'opération de synchronisation ajax (tutoriel détaillé)

Ci-dessous, je partagerai avec vous un article pour résoudre le problème de l'animation suspendue du navigateur causée par la demande de synchronisation js ajax. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

1. La cause du problème

Quand j'ai fait une demande aujourd'hui, j'ai rencontré une telle situation, c'est-à-dire qu'il y a un fonction dans le centre personnel de l'utilisateur. Cliquez sur le bouton. Vous pouvez actualiser les points actuels de l'utilisateur. Cela nécessite certainement l'utilisation de requêtes de synchronisation ajax. À cette époque, j'ai écrit et joué avec trois, cinq et deux. suit :

/**
  * 异步当前用户积分 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;
   }
  });
 }

Je pensais que c'était une fonction si simple. Écrivez-la simplement et tout ira bien. Cependant, un problème est survenu lors du fonctionnement lorsque l'utilisateur a cliqué sur le bouton des points d'actualisation, la copie n'a pas été effectuée. a été remplacé par "Rafraîchir", mais la requête ajax a été envoyée, j'ai donc vérifié le code de la page Web et constaté que le js avait en fait supprimé l'événement onclick qui liait la copie à l'élément HTML. Une fois la requête réussie, il est redevenu. l'original, mais la copie sur la page n'a pas changé. C'était étrange à l'époque je ne sais pas pourquoi la page a changé même si le code HTML a changé

2. . Comprenez la cause du problème

La racine du problème : j'ai enquêté à ce moment-là et j'ai finalement découvert qu'il s'agissait d'un problème "async:false". Il n'y a pas de problème si vous. passez à une requête asynchrone, alors pourquoi la requête synchrone provoque-t-elle une défaillance du code ?

Cause : Le fil de rendu (UI) du navigateur et le fil js s'excluent mutuellement lors de l'exécution d'opérations fastidieuses js, le rendu des pages sera bloqué. Il n'y a aucun problème lorsque nous exécutons un ajax asynchrone, mais lorsqu'il est défini sur une requête synchrone, les autres actions (le code derrière la fonction ajax et le thread de rendu) s'arrêteront. Même si mon instruction d'opération DOM est dans la phrase avant le lancement de la requête, cette demande de synchronisation bloquera "rapidement" le thread de l'interface utilisateur sans lui laisser le temps de s'exécuter. C'est pourquoi le code échoue.

3. Résoudre le problème

1 J'ai utilisé setTimeout pour résoudre le problème, mis le code ajax dans sestTimeout et laissé le navigateur redémarrer. Un thread à opérer, cela résout le problème. Le code est le suivant :

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) 
 }

Le deuxième paramètre de setTimeout est mis à 0, et le navigateur attendra un minimum défini. time.Execute

Le problème est résolu ici, mais vous pouvez l'essayer. Si vous devez afficher une image gif lorsque vous cliquez sur le bouton et que l'image continue de tourner, elle le fera. vous demandera qu'il est en cours de mise à jour. Vous constaterez que même si l'image sera affichée, l'image ne bouge pas, car même si la demande de synchronisation est retardée, elle bloquera toujours le thread de l'interface utilisateur pendant son exécution. Ce blocage est tellement génial que même l’image GIF ne bouge pas et ressemble à une image statique. La conclusion est évidente. SetTimeout traite les symptômes mais pas la cause première. Cela équivaut à rendre la demande de synchronisation "légèrement" asynchrone. Elle entrera alors toujours dans un cauchemar de synchronisation et bloquera le thread. opérations avant d'envoyer la demande

2. Utilisez Différé pour résoudre

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Comment implémenter des instructions personnalisées dans Vue ?

Comment modifier le style du sous-composant via le composant parent dans vue

Lié aux problèmes inter-domaines jsonp dans vue-resource

Comment implémenter le chargement asynchrone de composants dans vue+webpack ?

Utilisez Nginx dans vue.js pour résoudre les problèmes inter-domaines

Comment trouver la sous-chaîne commune maximale en JavaScript

Comment implémenter la connexion de recyclage automatique des transactions MySQL dans Node.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!