JavaScript est fantastique pour rendre vos applications Web dynamiques et interactives, mais il y a une chose qu'il ne peut pas bien gérer seul : les événements fréquents. Pensez à des choses comme le redimensionnement de la fenêtre, le défilement et la saisie dans les champs de recherche. S'ils ne sont pas gérés correctement, ceux-ci peuvent inonder votre application de déclencheurs d'événements, ralentissant les choses et créant une expérience utilisateur lente. C'est là qu'interviennent l'anti-rebond et la limitation. Ces techniques vous aident à contrôler la fréquence d'exécution de certaines fonctions, ce qui permet à votre application de rester rapide et réactive.

Dans cet article, nous détaillerons l'anti-rebond et la limitation, vous montrerons quand les utiliser et fournirons des exemples concrets pour les voir en action. Plongeons dans ces techniques essentielles d'optimisation des performances JavaScript !

Qu’est-ce que l’anti-rebond ?

Comment ça marche

Pensez à anti-rebond, comme si vous attendiez que quelqu'un ait fini de parler avant de répondre. Si vous avez déjà participé à une conversation au cours de laquelle quelqu’un n’arrête pas de vous interrompre, vous comprendrez ! Le concept clé de anti-rebond est qu'il retarde l'exécution d'une fonction jusqu'à ce qu'un délai spécifié se soit écoulé depuis le dernier déclenchement de l'événement.

En termes simples, si un événement (comme une saisie par un utilisateur) continue de se produire rapidement, l'anti-rebond garantit que la fonction associée (comme une requête de recherche) n'est exécutée qu'après l'arrêt de l'utilisateur pendant une période donnée.

Quand utiliser l'anti-rebond

Vous devez utiliser l'anti-rebond lorsque vous souhaitez limiter les appels de fonction excessifs causés par des entrées fréquentes de l'utilisateur. Un exemple classique est lorsque vous disposez d’un champ de recherche et que vous souhaitez effectuer un appel API à chaque fois que l’utilisateur tape. Sans rebondir, l'API pourrait être appelée à chaque frappe, créant ainsi une charge inutile sur votre serveur. Avec l'anti-rebond, l'API n'est appelée que lorsque l'utilisateur arrête de taper.

Anti-rebond dans le code

function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => func.apply(this, args), delay);
    };
}

// Usage
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(() => {
    console.log('API call made!');
}, 300)); // Only executes 300ms after the last keystroke

Dans cet exemple, la fonction anti-rebond garantit que l'appel d'API n'a lieu que 300 millisecondes après que l'utilisateur arrête de taper.

Qu’est-ce que la limitation ?

En quoi cela diffère du rebond

Parlons maintenant de limitation. Si l'anti-rebond attend de répondre jusqu'à ce que le bavardage s'arrête, l'étranglement est comme un agent de la circulation qui ne laisse passer qu'une seule voiture toutes les quelques secondes, quel que soit le nombre de voitures qui attendent. Il garantit qu'une fonction est appelée au maximum une fois par période définie, même si l'événement est déclenché à plusieurs reprises.

Quand utiliser la limitation

Vous souhaiterez utiliser la limitation lorsque vous devez garantir une exécution cohérente dans le temps. Par exemple, lorsqu'un utilisateur fait défiler une page, l'événement de défilement peut se déclencher des dizaines de fois par seconde. Sans limitation, votre application peut ralentir lorsqu'elle tente de gérer tous ces événements. La limitation limite la fréquence d'exécution du gestionnaire d'événements de défilement, améliorant ainsi les performances.

Limitation dans le code

function throttle(func, limit) {
    let lastCall = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastCall >= limit) {
            lastCall = now;
            func.apply(this, args);
        }
    };
}

// Usage
window.addEventListener('scroll', throttle(() => {
    console.log('Scroll event!');
}, 1000)); // Executes at most once every 1000ms

Ici, la fonction d'accélération garantit que le gestionnaire d'événements de défilement ne s'exécute qu'une fois toutes les 1 000 millisecondes, garantissant ainsi que votre application ne soit pas submergée.

Exemples concrets

Replaçons ces techniques dans un contexte plus pratique. Supposons que vous créez une application React dans laquelle les utilisateurs saisissent dans un champ de recherche. Vous pouvez anti-rebondir les événements d'entrée pour éviter d'inonder votre serveur d'appels API. Alternativement, si vous suivez la distance parcourue par l'utilisateur sur la page, vous pouvez utiliser la limitation pour optimiser vos performances.

Anti-rebond dans React

import { useState } from 'react';

function SearchComponent() {
    const [query, setQuery] = useState('');

    const handleSearch = debounce((value) => {
        // API call with the value
        console.log('Searching for:', value);
    }, 300);

    return (
         {
                setQuery(e.target.value);
                handleSearch(e.target.value);
            }}
        />
    );
}

Limitation des événements de défilement

import { useEffect } from 'react';

function ScrollTracker() {
    useEffect(() => {
        const handleScroll = throttle(() => {
            console.log('Scrolling...');
        }, 1000);

        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    return 
Scroll to see throttling in action!
;
}

Meilleures pratiques pour l'optimisation des performances

Anti-rebond ou limitation : quand choisir

Voici une règle générale :

• L'anti-rebond est parfait lorsque vous souhaitez attendre que l'utilisateur arrête de faire quelque chose. Par exemple, lorsque vous tapez dans une barre de recherche.
• La limitation fonctionne mieux lorsque vous souhaitez garantir une exécution cohérente et périodique au fil du temps. C’est idéal pour faire défiler ou redimensionner les fenêtres.

Lorsque vous savez à quel type d'événement vous faites face et à quelle fréquence il se déclenche, vous pouvez choisir la bonne technique pour le travail.

Conclusion

Le contrôle des événements fréquents en JavaScript est essentiel pour optimiser les performances, et l'anti-rebond et la limitation offrent des solutions puissantes. En comprenant quand les utiliser, vous pouvez rendre vos applications Web plus fluides et plus réactives, qu'il s'agisse de gérer les entrées de recherche, de redimensionner les fenêtres ou de gérer les événements de défilement.

La prochaine fois que votre application s'enlise à cause d'un trop grand nombre d'événements, demandez-vous : Dois-je anti-rebondir ou ralentir ? Vous ne serez pas déçu de l'avoir fait !

Prêt à l'essayer ? La prochaine fois que vous travaillerez sur un projet, essayez ces techniques. Vous serez surpris de voir à quel point tout semble plus fluide !