Anti-rebond ou limitation en JavaScript : l'optimisation des appels de fonction pour de meilleures performances

Comprendre l'anti-rebond et la limitation en JavaScript

L'anti-rebond et la limitation sont deux techniques importantes utilisées en JavaScript pour contrôler la vitesse à laquelle les fonctions sont exécutées. Ces techniques sont souvent utilisées pour optimiser les performances, en particulier dans des scénarios tels que la gestion des entrées utilisateur, le défilement des événements et le redimensionnement des événements. Les deux sont utilisés pour limiter la fréquence des appels de fonction, mais ils fonctionnent de différentes manières.

1. Anti-rebond

Debouncing garantit qu'une fonction n'est appelée qu'après un certain laps de temps depuis le dernier événement. En d'autres termes, cela retarde l'exécution de la fonction jusqu'à ce que l'utilisateur ait fini d'effectuer une action, comme taper dans un champ de texte ou redimensionner une fenêtre. Ceci est particulièrement utile pour les scénarios dans lesquels vous souhaitez empêcher qu'une fonction soit appelée trop fréquemment, par exemple lorsque l'utilisateur tape dans une barre de recherche.

Comment fonctionne l'anti-rebond :

• Lorsque l'événement est déclenché, l'appel de fonction est retardé pendant une durée spécifiée.
• Si l'événement est à nouveau déclenché avant que le délai ne soit écoulé, l'appel de fonction précédent est annulé et le temporisateur est réinitialisé.
• La fonction n'est exécutée qu'une fois le délai écoulé sans autre événement.

Exemple d'anti-rebond :

function searchQuery(query) {
  console.log(`Searching for: ${query}`);
}

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

const debouncedSearch = debounce(searchQuery, 500);

// Simulating typing events
debouncedSearch("JavaScript");
debouncedSearch("JavaScript debouncing");
debouncedSearch("Debouncing function"); // Only this will be logged after 500ms

Dans cet exemple :

• debouncedSearch n'appellera searchQuery qu'après 500 millisecondes sans autre invocation.
• Cela empêche que la fonction de recherche soit appelée à chaque fois qu'un caractère est saisi.

Cas d'utilisation pour l'anti-rebond :

• Entrée de recherche : lors de la mise en œuvre de suggestions de recherche en temps réel.
• Redimensionnement de la fenêtre : Pour éviter de déclencher des recalculs de mise en page à chaque événement de redimensionnement.
• Événements de défilement : pour empêcher le déclenchement d'une fonction pendant un défilement continu, en particulier dans les scénarios de défilement infini.

2. Limitation

La

Limitation garantit qu'une fonction est appelée au plus une fois à chaque intervalle spécifié, quel que soit le nombre de fois où l'événement est déclenché. Ceci est utile lorsque vous souhaitez limiter la fréquence des appels de fonction, par exemple en limitant le nombre de fois qu'un utilisateur peut faire défiler ou redimensionner la fenêtre au cours d'une certaine période de temps.

Comment fonctionne la limitation :

• La fonction est exécutée immédiatement dès le premier déclenchement de l'événement.
• Après cela, il est exécuté au maximum une fois toutes les n millisecondes, même si l'événement est déclenché plus fréquemment.

Exemple de limitation :

function searchQuery(query) {
  console.log(`Searching for: ${query}`);
}

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

const debouncedSearch = debounce(searchQuery, 500);

// Simulating typing events
debouncedSearch("JavaScript");
debouncedSearch("JavaScript debouncing");
debouncedSearch("Debouncing function"); // Only this will be logged after 500ms

Dans cet exemple :

• throttledScroll garantira que logScrollEvent est appelé au maximum une fois par seconde, quel que soit le nombre d'événements de défilement déclenchés pendant cette période.
• La fonction est exécutée immédiatement la première fois et les appels suivants sont retardés pour maintenir l'intervalle.

Cas d'utilisation pour la limitation :

• Événements de défilement : pour limiter la fréquence à laquelle une fonction est appelée pendant le défilement (par exemple, chargement paresseux d'images).
• Événements de redimensionnement : Pour optimiser le nombre de fois qu'une fonction de redimensionnement de fenêtre est appelée.
• Mouvements de la souris : pour empêcher une exécution continue lors de mouvements rapides de la souris.

3. Anti-rebond vs limitation : différences clés

Fonctionnalité

Feature	Debouncing	Throttling
Function Execution	Executes after a delay when events stop	Executes at a fixed interval, no matter how many events occur
Use Case	Ideal for events that occur frequently but should trigger once after some idle time (e.g., input fields, search bars)	Ideal for events that fire continuously (e.g., scroll, resize) but should be limited to a fixed interval
Example Scenario	Search bar input where suggestions are updated only after the user stops typing for a certain period	Scroll events where a function should only run once every few seconds, even if the user scrolls frequently
Execution Frequency	Executes only once after the event stops firing	Executes periodically, based on the interval set
Effectiveness	Prevents unnecessary executions during rapid event firing	Controls the frequency of function executions, even during continuous events

Anti-rebond Limitation ête> Exécution de fonction S'exécute après un délai lorsque les événements s'arrêtent S'exécute à un intervalle fixe, quel que soit le nombre d'événements qui se produisent Cas d'utilisation Idéal pour les événements qui se produisent fréquemment mais qui devraient se déclencher une fois après un certain temps d'inactivité (par exemple, champs de saisie, barres de recherche) Idéal pour les événements qui se déclenchent en continu (par exemple, défilement, redimensionnement) mais qui doivent être limités à un intervalle fixe Exemple de scénario Saisie de la barre de recherche où les suggestions sont mises à jour uniquement après que l'utilisateur arrête de taper pendant une certaine période Événements de défilement dans lesquels une fonction ne doit s'exécuter qu'une fois toutes les quelques secondes, même si l'utilisateur fait défiler fréquemment Fréquence d'exécution S'exécute une seule fois après l'arrêt du déclenchement de l'événement S'exécute périodiquement, en fonction de l'intervalle défini Efficacité Empêche les exécutions inutiles lors du déclenchement rapide d'événements Contrôle la fréquence d'exécution des fonctions, même lors d'événements continus

4. Exemple pratique : utiliser ensemble l'anti-rebond et la limitation

Vous pouvez combiner l'anti-rebond et la limitation dans les situations où vous avez besoin des deux techniques pour optimiser votre application. Par exemple, vous souhaiterez peut-être limiter les événements de défilement tout en anti-rebondissant les requêtes de recherche.

function searchQuery(query) {
  console.log(`Searching for: ${query}`);
}

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

const debouncedSearch = debounce(searchQuery, 500);

// Simulating typing events
debouncedSearch("JavaScript");
debouncedSearch("JavaScript debouncing");
debouncedSearch("Debouncing function"); // Only this will be logged after 500ms

Dans cet exemple :

• L'événement de défilement est limité pour se déclencher une seule fois par seconde.
• L'entrée de recherche est anti-rebond pour se déclencher seulement après 500 ms d'inactivité.

Conclusion

• Anti-rebond garantit qu'une fonction est exécutée après un certain temps sans qu'un événement ne soit déclenché, ce qui la rend idéale pour des scénarios tels que la saisie de recherche ou le redimensionnement.
• La Limitation limite le nombre de fois qu'une fonction peut être exécutée dans un laps de temps donné, ce qui la rend utile pour des événements tels que le défilement ou le redimensionnement de la fenêtre.

Les deux techniques permettent d'optimiser les performances et d'éviter les exécutions inutiles, en particulier dans les cas où les événements se produisent rapidement.

---

Bonjour, je m'appelle Abhay Singh Kathayat !
Je suis un développeur full-stack avec une expertise dans les technologies front-end et back-end. Je travaille avec une variété de langages et de frameworks de programmation pour créer des applications efficaces, évolutives et conviviales.
N'hésitez pas à me contacter à mon e-mail professionnel : kaashshorts28@gmail.com.

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!