La stabilisation et la limitation des fonctions JavaScript

Tags : navigateur d’autre en savoir plus sur l’ONS publiques numéro vitesse public clic de souris

Anti-tremblement et stabilisateur pour empêcher les tremblements de la main

Est de déclencher plusieurs événements au sein d’une certaine période de temps et d’exécuter uniquement la dernière fois.

Par exemple, Association de recherche de Baidu, associera seulement les derniers caractères d’entrée

ResizeEvent (contenu) de la fonction {console.log ("fenêtre" + contenu)} laisser événement = debounce (resizeEvent) fonction debounce ( FUNC, retard) {s timeOut = null return (args) = > {si (timeOut ! == null) {//Clear dernier timer, reminutage clearTimeo UT (timeOut)} timeOut = setTimeout (() = > {func (args)}, retard)}} //when redimensionnement de la fenêtre du navigateur, déclenche un événement addEventListener (' re Taille ', () = > {événement (1)})

Application :

1.recherche de Lenovo, enregistrer les demandes de ressources tandis que les utilisateurs entrent constamment des valeurs, ce qui garantit que Lenovo est correcte

2. événement de redimensionnement de la fenêtre, stabilisateur permet il déclencher une seule fois

Déclenche plusieurs événements sur une période de temps et la fonction exécute une seule fois après chaque intervalle.

Par exemple, des jeux FPS ont été enfoncées les souris, balles de mitraillette à une certaine vitesse de continu

ResizeEvent (contenu) de la fonction {console.log ("fenêtre" + contenu)} laisser événement = papillon (resizeEvent) fonction throttle ( FUNC, retard) {s dernière = null let deferTimer = retour null (args) = > {laisser maintenant = new Date (). getTime () si (las T. maintenant le dernier + delay) {//Before l’intervalle, claire minuterie clearTimeout ne (deferTimer) deferTimer = setTimeout (() = & G T {//Re-new minuterie, attendez que l’intervalle être placées en dernier, exécuter la fonction last = func maintenant (args)}, retard)} else {//first temps ou a dépassé l’intervalle Dernière = maintenant func (args)}}} //when redimensionnement de la fenêtre du navigateur, déclenche un événement addEventListener (« Redimensionner », () = > {événement (1)})

Application :

1. clic constant pour déclencher une fonction, MouseDown (déclenché une seule fois par unité de temps)

2. la souris continue de se déplacer déclencher une fonction, MouseMove (déclenché une seule fois par unité de temps)

Anti-tremblement et limitation

Les mêmes points sont conçus pour résoudre des problèmes de performances provoqués par un grand nombre de déclencheurs dans un court laps de temps.

Différents points sont basés sur les différents besoins, la mise en œuvre de principes différents.

Il y a des questions à discuter ensemble, bienvenue à prêter attention aux notes Qin numéros publics

La stabilisation et la limitation des fonctions JavaScript