Astuce rapide: comment parcourir les événements de défilement

Points clés

• L'écoute des événements de défilement peut provoquer une dégradation des performances car le navigateur exécute une fonction de rappel chaque fois que l'utilisateur défile; L'accélérateur assure un flux constant d'événements sur un intervalle de temps donné, tandis que le dé-bumping combine une série d'événements en un seul événement.
• La mise en œuvre de la limitation des événements en JavaScript peut être compliquée, et il est recommandé d'utiliser une implémentation tierce comme Lodash, qui est la norme pour la limitation des événements. La fonction de limitation de Lodash simplifie la limitation de l'événement à rouler et offre des options pour déterminer si la fonction de rappel est exécutée au bord avant et / ou arrière de l'événement.
• La clé du choix de la limitation et du débouchement est de voir la nature du problème à résoudre. L'accélération s'applique aux événements qui se produisent dans un laps de temps donné, comme le défilement, tandis que le débouchement s'applique à des événements tels que des pressions de clés, où l'intervalle entre les événements n'est pas important.

Cet article a été examiné par Vildan Softic et Julian Motz. Merci à tous les évaluateurs de pairs SitePoint pour avoir obtenu le contenu de sitepoint à son meilleur!

L'un des dangers de l'écoute des événements de défilement est la dégradation des performances. Le navigateur exécute une fonction de rappel chaque fois que l'utilisateur défile, qui peut avoir de nombreux événements par seconde. Si la fonction de rappel effectue beaucoup d'opérations redessine, cela signifie de mauvaises nouvelles pour l'utilisateur final. Le redémarrage coûte cher, surtout lorsque vous redessiez la majeure partie de la vue, comme lorsqu'un événement de défilement se produit.

L'exemple suivant illustre ce problème:

Voir l'exemple sur Codepen: Événements de défilement non lancées

En plus de la dégradation des performances et sujette aux crises. Cet exemple illustre ce qui se passe lorsque l'ordinateur suit exactement vos instructions. Il n'y a pas de transition lisse entre les couleurs d'arrière-plan, l'écran clignote. Tout programmeur malheureux peut penser qu'il n'y a aucun espoir dans ce monde. N'y a-t-il pas de meilleur moyen?

Événements standard

Une solution consiste à reporter les événements et à gérer plusieurs événements à la fois. Il existe deux fonctions couramment utilisées qui peuvent nous aider à faire cela: la limitation et le débouchement.

La confiance garantit un flux constant d'événements sur un intervalle de temps donné, tandis que le dés-bumping combine une série d'événements en un seul événement. Une façon de penser est que la limitation est basée sur le temps, tandis que Debounce est basé sur l'événement. L'accélération est garantie pour être exécutée, tandis que De-Jitter n'est pas garantie d'être exécutée après la fin du paquet. Si vous voulez en savoir plus à ce sujet, veuillez consulter cette discussion approfondie sur le déshumage et la limitation.

dé-shaking

Debounce résout différents problèmes, tels que les boutons avec Ajax. Pourquoi envoyer une demande pour chaque pression lorsque vous tapez quelque chose sous un formulaire? Une solution plus élégante consiste à combiner une série de clés en un événement qui déclenchera une demande Ajax. Cela est conforme au processus naturel de saisie et enregistre les ressources du serveur. Pour les pressions de touches, l'intervalle entre les événements n'est pas important car l'utilisateur ne tape pas à un rythme constant.

Trust

Comme il n'y a aucune garantie de débouchement, une autre méthode consiste à étrangler l'événement roulant. Le défilement se produit dans un laps de temps donné, il convient donc de parcourir. Une fois que l'utilisateur a commencé à faire défiler, nous voulons assurer une exécution opportune.

Cette technique aide à vérifier si nous sommes situés dans une partie spécifique de la page. Compte tenu de la taille de la page, il faut de nombreuses secondes pour faire défiler le contenu. Cela permet à la limitation de déclencher des événements une seule fois dans un intervalle donné. La limitation des événements rendra l'expérience de défilement plus fluide et assurera l'exécution.

Ce qui suit est un accélérateur d'événements simples écrit en javascript natif:

function throttle(fn, wait) {
  var time = Date.now();
  return function() {
    if ((time + wait - Date.now()) < 0) {
      fn();
      time = Date.now();
    }
  }
}

Cette implémentation définit une variable de temps qui suit le moment où la fonction est appelée pour la première fois. Chaque fois que la fonction retournée est appelée, il vérifie si l'intervalle d'attente s'est écoulé, et si oui, il déclenche le rappel et réinitialise l'heure.

Affichez l'exemple sur Codepen: implémentation native de la limitation JS

Bibliothèque d'utilisateurs

Il y a beaucoup de dangers dans la limitation des événements, et il n'est pas recommandé de l'écrire vous-même. Plutôt que d'écrire votre propre implémentation, je vous recommande d'utiliser une implémentation tierce.

lodash

Lodash est la norme de facto pour la limitation des événements en javascript. Cette bibliothèque est open source afin que vous puissiez parcourir le code comme vous le souhaitez. L'avantage est que la bibliothèque est modulaire, vous pouvez donc en obtenir ce que vous en voulez.

En utilisant la fonction de limitation de Lodash, la limitation des événements de roulement devient simple:

window.addEventListener('scroll', _.throttle(callback, 1000));

Cela limite le torrent d'événement roulant entrant à une fois tous les 1000 millisecondes (une seconde).

L'API

offre des options frontales et arrière comme suit:

_.throttle(callback, 1, { trailing: true, leading: true });

Ces options déterminent si la fonction de rappel est exécutée à l'avant et / ou au bord arrière de l'événement.

Un problème ici est que si vous définissez à la fois le front et le bord arrière sur False, la fonction de rappel ne se déclenche pas. La définition du bord avant sur true démarrera immédiatement l'exécution de rappel, puis la limite. Cela garantit l'exécution pour chaque intervalle lorsque vous définissez les bords avant et traînants sur true.

Affichez la démo sur Codepen: Événement de roulement de gaz

En regardant le code source, j'ai trouvé intéressant que Throttle () soit juste un wrapper pour Debounce (). L'accélérateur passe simplement un ensemble différent de paramètres pour modifier le comportement souhaité. Licette définit un maxwait, qui garantira l'exécution une fois que vous attendez aussi longtemps. Le reste de la mise en œuvre reste le même.

J'espère que vous trouverez Lodash bon pour vous dans votre prochain événement Adventure Glancing!

Conclusion

La clé de l'exécution et du débouchement est de vérifier la nature du problème à résoudre. Ces deux technologies conviennent à différents cas d'utilisation. Je suggère de regarder la question du point de vue de l'utilisateur pour trouver la réponse.

L'avantage de l'utilisation de Lodash est qu'il résume beaucoup de complexité dans une API simple. La bonne nouvelle est que vous pouvez utiliser _.throttle() dans votre projet sans ajouter toute la bibliothèque. Il y a Lodash-CLI, un outil qui vous permet de créer uniquement des versions personnalisées contenant les fonctions requises. La limitation de l'événement n'est qu'une petite partie de toute la bibliothèque.

FAQ sur les événements roulants (FAQ)

• Quel est le but de la limitation des événements roulants en JavaScript?

Trust Rolling Events in JavaScript est une technologie utilisée pour optimiser les performances d'un site Web ou d'une application Web. Lorsqu'un utilisateur défile sur une page Web, le navigateur génère un événement de défilement pour le mouvement de chaque pixel. Cela peut entraîner des centaines ou même des milliers d'événements générés par seconde, ce qui peut dégrader sévèrement les performances de la page Web. En organisant ces événements, nous pouvons limiter le nombre d'événements à traiter, améliorant ainsi les performances et la réactivité de la page Web.

• Comment fonctionne la limitation en JavaScript?

La confiance dans JavaScript fonctionne en définissant un retard entre les exécutions d'événements. Lorsqu'un événement est déclenché, la minuterie démarre. Si un autre événement est déclenché avant la fin de la minuterie, l'événement est ignoré. Cela garantit qu'un certain temps doit passer avant le traitement d'un autre événement. Cette technique est particulièrement utile pour les événements fréquemment déclenchés tels que les événements de défilement.

• Quelle est la différence entre l'exécution et la décalage?

La confiance et le débouchement sont des techniques utilisées pour limiter le nombre de fois qu'une fonction peut être exécutée au fil du temps. La principale différence entre les deux est la façon dont ils gèrent la latence. L'accélérateur garantit que la fonction n'est pas appelée plus d'une fois chaque x milliseconde, tandis que le débouchement garantit que la fonction n'est pas appelée jusqu'à ce que X millisecondes se soient écoulées depuis le dernier appel. En d'autres termes, Throttling exécute la fonction à intervalles réguliers, tandis que Debounce exécute la fonction après une période d'inactivité.

• Comment puis-je réaliser la limitation en JavaScript?

La fonction setTimeout peut être utilisée pour étouffer en JavaScript. Cette fonction vous permet de retarder l'exécution de la fonction par un nombre spécifié de millisecondes. En utilisant setTimeout avec les auditeurs d'événements, vous pouvez vous assurer que la fonction du gestionnaire d'événements n'est pas appelée plus d'une fois tous les x millisecondes.

• Puis-je utiliser la limite avec d'autres événements en plus des événements de défilement?

Oui, la limitation peut être utilisée avec tout type d'événement en JavaScript, pas seulement les événements de défilement. Il est particulièrement utile pour les événements qui déclenchent ou nécessitent souvent un traitement étendu, tels que les événements de mouvement de souris, le redimensionnement des événements et les événements de presse de clés.

• Y a-t-il une bibliothèque ou un cadre qui fournit une prise en charge intégrée pour l'exécution?

Oui, il existe plusieurs bibliothèques et frameworks qui fournissent une prise en charge intégrée pour l'exécution. Par exemple, la populaire bibliothèque de services publics JavaScript Lodash offre une fonction d'étranglement qui facilite la mise en œuvre de la limitation. De même, la populaire bibliothèque JavaScript JQuery fournit également une fonction d'étranglement dans son API.

• Quels sont les inconvénients potentiels de la limitation?

Bien que la limitation peut améliorer les performances d'une page Web, elle peut également conduire à une réponse à l'expérience utilisateur ralentie si elle est mal utilisée. Par exemple, si le retard est réglé trop élevé, les utilisateurs peuvent remarquer un décalage entre leurs opérations et la réponse de la page Web. Par conséquent, il est important de trouver un équilibre entre les performances et la vitesse de réponse lors de l'utilisation de la limitation.

• Comment tester l'efficacité de la limitation?

Vous pouvez tester l'efficacité de la limitation en mesurant les performances de la page Web avant et après la limitation. Cela peut être fait à l'aide d'outils de développeur de navigateur, qui fournit des informations détaillées sur les performances de la page Web, y compris le temps nécessaire pour traiter les événements.

• peut-il être utilisé en combinaison avec d'autres techniques d'optimisation des performances?

Oui, la limitation peut être utilisée en combinaison avec d'autres techniques d'optimisation des performances telles que Debounce et requestAnimationFrame. En combinant ces technologies, vous pouvez encore améliorer les performances et la réactivité de vos pages Web.

• Y a-t-il une alternative à la limitation?

Oui, il existe plusieurs alternatives à la limitation, notamment le débouchement et requestAnimationFrame. Le débouchement est similaire à la limitation, mais au lieu de limiter le nombre de fois où une fonction peut être appelée au fil du temps, il garantit que la fonction ne sera pas appelée tant qu'un certain temps ne sera pas passé depuis le dernier appel. requestAnimationFrame est une méthode qui indique au navigateur d'exécuter une animation et demande au navigateur d'appeler une fonction spécifiée pour mettre à jour l'animation avant la prochaine repeinte.

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!