Explication détaillée de la limitation des fonctions JavaScript et explication détaillée des exemples de méthodes

Cet article présente principalement JavaScript une explication détaillée de la limitation des fonctions et des informations associées avec des exemples. Les amis dans le besoin peuvent se référer à

Explication détaillée de la limitation des fonctions JavaScript<.>

Il n'y a qu'un seul thread d'interface utilisateur pour une page Web dans le navigateur. Il gérera également le rendu de l'interface et l'exécution du code JavaScript sur la page (pour développer brièvement, le navigateur ou l'environnement d'exécution JavaScript est pas monothread, comme le rappel asynchrone ajax, la communication native du framework hybride, la file d'attente d'événements, le thread d'exécution CSS, etc. sont tous des environnements multithread, mais ES6 a introduit la classe Promise pour réduire certaines situations asynchrones). Par conséquent, lorsque le code JavaScript exécute une méthode qui nécessite de nombreux calculs, il peut bloquer le thread de l'interface utilisateur, ce qui peut geler la réponse de l'utilisateur. Dans les cas graves, le navigateur vous demandera si la page ne répond pas et s'il doit la forcer à le faire. fermer. Par exemple, les événements de défilement de pages Web, les événements de glissement et de zoom des appareils mobiles, etc. Même s'il n'y a pas de problèmes de performances sérieux, nous devrions nous décharger du temps de traitement à grande échelle qui sera déclenché plusieurs fois sur une courte période du point de vue de l'

optimisation des performances.

Comment empêcher efficacement le thread de l'interface utilisateur d'exécuter un code trop long est un problème que toutes les applications interactives utilisateur doivent prendre en compte. Le même problème peut être résolu en utilisant le thread principal de l'interface utilisateur sur le client

. Android Threads pour répartir les calculs. De manière correspondante, js peut également disperser les calculs en introduisant webWorker, mais il existe une méthode plus simple et plus efficace dans js : la limitation des fonctions. La technique de base de l'utilisation de la fonction pour accélérer est d'utiliser la minuterie pour calculer en segments. Il existe en gros deux idées de méthodes de mise en œuvre spécifiques.

·Méthode 1

1 L'idée de cette implémentation est facile à comprendre : définir un intervalle, par exemple 50 millisecondes, to Ce temps est utilisé comme référence pour régler le minuteur. Lorsque l'intervalle entre le premier événement déclencheur et le deuxième événement déclencheur est inférieur à 50 millisecondes, effacez ce minuteur et définissez un nouveau minuteur, et ainsi de suite, jusqu'à 50 millisecondes après un. L'événement est déclenché. Il n'y a pas de redéclenchement en quelques millisecondes. Le code est le suivant :

function debounce(method){ 
  clearTimeout(method.timer); 
  method.timer=setTimeout(function(){ 
   method(); 
  },50); 
}

Il y a un problème avec cette conception : un événement qui devrait être déclenché plusieurs fois peut finir par se produire une seule fois. Plus précisément, pour un événement de défilement progressif, si l'utilisateur défile trop rapidement ou si l'intervalle de limitation de fonction défini par le programme est trop long, l'événement de défilement final apparaîtra comme un événement de saut soudain et le processus intermédiaire sera interrompu par limitation. . Cet exemple est un peu exagéré, mais si vous utilisez cette méthode pour limiter, vous finirez par avoir l'impression que le programme est "plus brusque" que lorsqu'il n'est pas limité, ce qui est très mauvais pour l'expérience utilisateur. Il existe une idée de conception pour combler cette lacune.

·Méthode 2

2 L'idée de la deuxième méthode de mise en œuvre est légèrement différente de la première : définir un intervalle, tel que 50. millisecondes, ce temps est utilisé comme base pour séparer de manière stable les situations de déclenchement d'événements, c'est-à-dire que si plusieurs événements sont déclenchés en continu dans un délai de 100 millisecondes, ils ne seront exécutés qu'avec un intervalle stable de 50 millisecondes. Le code est le suivant :

var oldTime=new Date().getTime(); 
var delay=50; 
function throttle1(method){ 
  var curTime=new Date().getTime(); 
  if(curTime-oldTime>=delay){ 
   oldTime=curTime; 
   method(); 
  } 
}

Par rapport à la première méthode, la deuxième méthode peut être exécutée plus de fois que la première méthode (parfois cela signifie plus de requêtes en arrière-plan, c'est-à-dire plus de trafic), mais cela résout les défauts de la première méthode pour effacer le processus intermédiaire. Par conséquent, dans des scénarios spécifiques, la méthode à utiliser doit être décidée en fonction de la situation.

Pour la deuxième méthode, nous proposons une autre façon d'écrire la même fonction :

var timer=undefined,delay=50; 
function throttle2(method){ 
  if(timer){ 
    return ; 
  } 
  method(); 
  timer=setTimeout(function(){ 
    timer=undefined; 
  },delay); 
}

Enfin, parlons du nom de la fonction de limitation. Tout le monde souvent, vous verrez deux méthodes. noms : throttle et anti-bounce. Throttle peut être traduit par "contrôle, bloqué", et anti-rebond peut être traduit par "anti-rebond". Dans "JavaScript Advanced Programming", l'auteur a présenté la première méthode et a utilisé le nom de fonction "throttle". Dans le livre "Third-Party JavaScript Programming", la première et la deuxième méthodes apparaissent. L'auteur a nommé la première méthode "anti-rebond" et la deuxième méthode "throttle". Lors de l'introduction de deux méthodes en même temps, certains articles en Chine nomment à tort la première méthode "accélérateur" et la deuxième méthode "anti-rebond", ce qui est très irresponsable d'un point de vue anglais. Nous mettons donc les choses au clair : la première méthode peut être comprise comme "anti-rebond" et doit être nommée "anti-rebond" ; la deuxième méthode peut être comprise comme "limitation de fonction" et doit être nommée "accélérateur".

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!