Explication détaillée de la limitation des fonctions JavaScript

Le navigateur n'a qu'un seul thread d'interface utilisateur pour une page Web, qui 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 ne sont pas monothread. Des éléments tels que les rappels asynchrones ajax, la communication native dans le cadre hybride, les files d'attente d'événements, les threads d'exécution CSS, etc. sont tous des environnements multithreads. 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 graves, nous devons 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 d'interaction utilisateur doivent prendre en compte. Pour le même problème sur le client Android, vous pouvez utiliser le thread principal de l'interface utilisateur pour ouvrir le sous-thread. threads pour disperser 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 limitation des fonctions consiste à utiliser des calculs segmentés par minuterie. Il existe en gros deux idées de méthodes de mise en œuvre spécifiques.

·Méthode 1

1. L'idée decette implémentation est facile à comprendre : définir un intervalle, par exemple 50 millisecondes, et régler la minuterie en fonction de cette heure. la première fois Lorsque l'intervalle entre l'é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'à ce qu'il n'y ait plus de déclenchement répété dans les 50 millisecondes suivant le déclenchement d'un événement. Le code est le suivant :

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

Copier après la connexion

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. one : définissez un intervalle de temps, par exemple 50 millisecondes, pour séparer de manière stable les déclencheurs d'événements en fonction de cette durée. Autrement dit, 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();
   }
}

Copier après la connexion

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 multiples à l'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);
}

Copier après la connexion

Enfin, parlons de la limitation des fonctions concernant le problème de nom. , vous verrez souvent deux noms de méthode : 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 une explication détaillée de la limitation des fonctions JavaScript. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !