[Traductions] Implémentation d'animations avec Throttle en JavaScript

Lien de l'article original

---

Implémentation d'animations avec Throttle en JavaScript

Ce document explique comment améliorer les performances d'animation à l'aide de la limitation en JavaScript et applique la limitation pour résoudre le problème des animations de défilement saccadées. Il compare également les différences avant et après l'application de l'accélérateur.

Qu’est-ce que l’accélérateur ?

L'accélérateur est une technique qui limite l'appel d'une fonction « au plus une fois » dans un « certain intervalle de temps ». En d'autres termes, même si un événement se produit plusieurs fois sur une courte période, la fonction ne sera exécutée qu'une seule fois dans l'intervalle de temps défini par la manette. Par exemple, si une fonction a une limitation de 100 ms, même si l'événement se produit 10 fois en 1 seconde, la fonction sera exécutée au maximum 10 fois (à intervalles de 100 ms).

Où l’accélérateur est-il utilisé ?

L'accélérateur peut être utilisé dans les situations suivantes :

• Prévenir la dégradation des performances due au déclenchement excessif d'événements : Lorsque des événements tels que le défilement, le mouvement de la souris et le redimensionnement de la fenêtre se produisent fréquemment sur une courte période, le gestionnaire d'événements peut être exécuté de manière excessive, entraînant des problèmes de performances. L'accélérateur est utilisé pour atténuer cela.
• Rendre les animations plus fluides : Lorsqu'il est nécessaire d'exprimer des changements continus, tels que des animations de défilement, l'animation peut être saccadée ou saccadée en fonction de la fréquence de l'événement. L'utilisation de l'accélérateur peut rendre les animations plus fluides.

Problème : bégaiement et animations de défilement saccadées

Une tentative a été faite pour implémenter une animation de défilement fluide en fonction de l'événement de la molette de défilement, mais avant d'appliquer la limitation, l'animation était saccadée.

Raison : En effet, l'événement wheel se produit à un rythme très élevé, provoquant un appel excessif de la fonction window.scrollBy, empêchant le navigateur de traiter toutes les requêtes.

Comparaison

1. Coder avant d'appliquer l'accélérateur

useEffect(() => {
    const container = scrollContainerRef.current;
    if (!container) return;

    const handleWheel = (event) => {
        event.preventDefault();

        window.scrollBy({
            left: event.deltaY,
            behavior: 'smooth'
        });
    };

    container.addEventListener('wheel', handleWheel);

    return () => {
        container.removeEventListener('wheel', handleWheel);
    };
}, []);

Dans ce code, la fonction handleWheel est exécutée à chaque fois qu'un événement de roue se produit. Cette fonction calcule la quantité de défilement en utilisant la valeur deltaY de l'événement et défile en appelant la fonction window.scrollBy. Le problème est que l'événement wheel peut se produire plusieurs fois sur une très courte période, ce qui provoque un appel excessif de window.scrollBy, ce qui entraîne une animation saccadée.

2. Code après avoir appliqué l'accélérateur

useEffect(() => {
    const container = scrollContainerRef.current;
    if (!container) return;

    const handleWheel = (event) => {
        event.preventDefault();

        window.scrollBy({
            left: event.deltaY,
            behavior: 'smooth'
        });
    };

    container.addEventListener('wheel', handleWheel);

    return () => {
        container.removeEventListener('wheel', handleWheel);
    };
}, []);

Dans le code limité, la variable throttleTimer est utilisée pour gérer l'exécution de la fonction. Le processus fonctionne comme suit :

• Lorsque la fonction handleWheel est appelée, elle vérifie si throttleTimer existe.
• Si throttleTimer existe (ce qui signifie qu'une minuterie précédemment définie est toujours active), la fonction revient immédiatement. Cela empêche le traitement de nouvelles demandes de défilement alors qu'une animation de défilement est déjà en cours.
• Si throttleTimer n'existe pas, event.preventDefault() est appelé pour empêcher le comportement de défilement par défaut, et setTimeout est utilisé pour exécuter la fonction window.scrollBy après 16 ms.
• Dans la fonction de rappel setTimeout, throttleTimer est défini sur null, réinitialisant la manette des gaz et permettant à la fonction d'être rappelée après le délai.

3. Améliorations potentielles

• Délai initial de setTimeout

  setTimeout est utilisé pour implémenter le mécanisme de limitation. setTimeout exécute la fonction de rappel après le délai spécifié (16 ms dans ce cas). Par conséquent, lorsque le premier événement de roue se produit, window.scrollBy est invoqué après un délai de 16 ms. Ce retard initial peut conduire à une perception de manque de réactivité immédiate, potentiellement interprétée comme un bégaiement, en particulier lors de mouvements rapides des roues. (D'autres améliorations seront explorées à l'avenir...)

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!