Comment résoudre le problème de l'animation suspendue du navigateur causée par la demande de synchronisation js ajax ?

Cet article partage principalement 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. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

1. La cause du problème

J'ai rencontré une situation lorsque j'ai fait une demande aujourd'hui. Il y a une fonction dans le centre personnel de l'utilisateur. points actuels. C'est définitivement Nous devons utiliser la demande de synchronisation d'ajax. A cette époque, j'écrivais et jouais avec trois clics, cinq divisions et deux. Le code approximatif est le suivant :

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

I. Je pensais qu'une fonction aussi simple conviendrait si je l'écrivais simplement. , un problème est survenu pendant le fonctionnement. Lorsque l'utilisateur a cliqué sur le bouton des points d'actualisation, la copie n'a pas été modifiée en "Actualisation", mais la requête ajax a été envoyée, j'ai donc a vérifié le code de la page Web et a constaté que js liait en fait la copie à l'élément html onclick. L'événement a été supprimé et rétabli à l'original une fois la demande réussie, mais la copie sur la page n'a pas changé. fois. Je ne sais pas pourquoi le code html a changé mais la page n'a pas changé

2. Comprendre la cause du problème

Racine du problème : j'ai enquêté à ce moment-là et finalement. J'ai découvert qu'il s'agissait d'un problème avec "async:false". Si je le changeais en asynchrone, il n'y aurait aucun problème. Alors pourquoi une requête synchrone provoque-t-elle un échec de 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 en 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. J'ai mis le code ajax dans sestTimeout et j'ai laissé le navigateur redémarrer un thread pour fonctionner. Comme suit :

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

Le deuxième paramètre de setTimeout est défini sur 0 et le navigateur s'exécutera

après un temps minimum défini. Le problème est résolu ici, mais vous pouvez essayer If. vous devez faire apparaître une image GIF lorsque vous cliquez sur le bouton, et l'image continue de tourner, indiquant qu'elle est en cours de mise à jour, vous constaterez que même si l'image sera affichée, l'image ne bougera pas, car même si la synchronisation est effectuée. La demande est retardée, mais elle bloquera toujours le thread de l'interface utilisateur pendant l'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, et elle entrera toujours dans un cauchemar de synchronisation et bloquera le thread. opérations courtes avant d'envoyer la demande

2. Utilisez le mode différé pour résoudre le problème

Recommandations associées :

Exemple de partage de code HTML5 WebWorkers pour empêcher la suspension du navigateur. animation

Méthode d'envoi des paramètres de la méthode de publication Extjs pendant request_extjs synchrone ajax

Une brève discussion sur les requêtes Ajax et la mise en cache du navigateur

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!