N'oubliez plus jamais le rebond et l'accélérateur. Visualisez-les - Codepen inclus

Ceci n'est pas simplement un autre article essayant d'expliquer comment fonctionne le anti-rebond ou la limitation au niveau du code, c'est plutôt une illustration pour mémoriser et visualiser le concept afin que vous puissiez les appliquer pratiquement à votre travail.

Personnellement, j'oublie souvent les concepts d'anti-rebond et de limitation, alors quand quelqu'un me demande de les expliquer - ou si une question surgit dans une interview - je cligne des yeux ?. Pour éviter cela, j'ai créé une page simple pour m'aider à me rafraîchir la mémoire. Si vous ne voulez pas vous sentir comme un imposteur, suivez-nous ?.

Dans le codepen ci-dessous, j'ai réglé le délai à 2 secondes pour l'anti-rebond et l'accélérateur. Essayez de cliquer sur des aliments aléatoires et faites une pause.

Indice

• L'analogie du restaurant
• Explication
  • Pourquoi anti-rebond ou accélérateur de toute façon ?
  • Gestionnaire d'événements JS
  • Qu'est-ce qui ne va pas ?
  • Anti-rebond
  • Accélérateur

Lien vers la page

ashiqsultan.github.io

Lien GitHub

Analogie du restaurant

Imaginez que vous êtes dans un restaurant et que vous souhaitez commander de la nourriture, alors vous choisissez le menu sur la table et vous commencez simplement à lire tous les éléments. (Dans la page Web que j'ai partagée, cliquer sur différents aliments équivaudra à lire l'élément de menu)

L'analogie ici

• ? Lecture d'un aliment = ? Cliquez sur le bouton
• ?‍? Le serveur va à la cuisine = ? Appel API

Et imaginez qu'il y a trois types différents de serveurs au restaurant qui pourraient vous servir :

1. ?‍♂️ Serveur normal

   • Prend note à chaque fois que vous mentionnez un élément
   • Courut à la cuisine pour chaque article individuel
   • Comme JS gérant chaque événement immédiatement

2. ? Serveur rebondi

   • Lorsque vous commencerez à lire le menu, il attendra que vous fassiez une pause d'au moins 2 secondes avant de prendre la commande.
   • C'est comme attendre qu'un utilisateur ait fini de taper avant de passer un appel API

3. ?‍? Serveur limité

   • Prend les commandes seulement une fois toutes les 2 secondes
   • Si vous mentionnez plusieurs articles dans ces 2 secondes, ils iront tous dans le même ordre
   • Comme limiter les appels d'API à une fois toutes les X secondes, quelle que soit l'activité de l'utilisateur

Remarque : La principale différence est :

• Anti-rebond : attend que l'activité (clic sur le bouton) s'arrête pendant une durée spécifiée pour se déclencher
• Limitation : se déclenche à intervalles RÉGULIERS, quel que soit le moment où une activité est arrêtée
• De plus, 2 secondes sont juste quelque chose que j'ai utilisé comme exemple, cela peut être n'importe quelle période de temps

Explication

Pourquoi anti-rebond ou accélérateur de toute façon ?

Avant de comprendre le rebond ou l'accélérateur, nous devons savoir pourquoi sont-ils utilisés en premier lieu. Pour savoir cela, comprenons le comportement des gestionnaires d'événements JS

Gestionnaires d'événements dans JS

En JS, les gestionnaires d'événements ne sont que des fonctions qui s'exécutent lorsque des événements spécifiques (comme des clics, une saisie ou un défilement) se produisent. Par défaut, ces gestionnaires se déclenchent à chaque fois que l'événement se produit : chaque frappe, chaque clic ou mouvement de défilement.

// Basic event handler
button.addEventListener('click', function() {
    console.log('Button clicked!');
});

// Basic keystroke handler
input.addEventListener('keyup', function() {
    console.log('Key pressed!');
});

Qu'est-ce qui ne va pas?

Disons par exemple que vous avez un bouton qui permettrait d'effectuer un appel API

function makeApiCall() {
  console.log("API call made");
}

button.addEventListener('click', () => {
  makeApiCall();
});

La fonction ci-dessus exécutera makeApiCall() à chaque clic de bouton (c'est-à-dire) si vous parvenez à appuyer dessus 10 fois en 1 seconde, devinez ce que vous avez effectué 10 appels API en 1 seconde. Ceci est le comportement par défaut.

Mais lancer un appel API à chaque fois pour un événement peut être inefficace et la plupart du temps, ce n'est pas ce que vous recherchez. C'est là que la limitation et l'anti-rebond entrent en jeu.

Si vous souhaitez retirer une définition de cet article, c'est peut-être celle-là. La limitation et l'anti-rebond sont les deux moyens les plus courants de contrôler le taux de réponse d'un écouteur d'événement.

Anti-rebond

Je ne vais pas expliquer le code anti-rebond car il peut simplement être importé depuis lodash, nous verrons plutôt où vous pouvez réellement l'utiliser.

Utilisez Debouncing lorsque vous souhaitez effectuer l'appel API uniquement si l'utilisateur a arrêté de taper pendant un certain temps ou a arrêté de cliquer pendant un certain temps.

Dans notre exemple, si l'utilisateur continue de cliquer sur le bouton même pendant 5 minutes d'affilée, l'appel de l'API ne sera effectué qu'une seule fois.

Il se passe donc deux choses ici :

• L'utilisateur doit arrêter de cliquer.
• Arrêter de cliquer signifie qu'au moins pendant 2 secondes, il ne devrait y avoir aucun clic sur le bouton.

Étrangler

L'accélérateur est comme un intervalle. Utilisez-le lorsque vous ne voulez pas attendre que l'utilisateur s'arrête, mais plutôt effectuer un appel API à chaque intervalle, disons 2 secondes

Exemple, si l'utilisateur tape pendant 1 minute d'affilée sans faire de pause, toutes les 2 secondes, vous appellerez l'API.

Conclusion

Comme mentionné dans l'article, il ne s'agit pas d'expliquer comment fonctionnent les fonctions mais plutôt de visualiser et de comprendre pourquoi elles sont utilisées. Je vous recommanderais sûrement de comprendre au niveau du code comment ils fonctionnent, mais personnellement, j'utiliserais toujours l'anti-rebond et l'accélérateur fournis par la bibliothèque lodash et ne réinventerais pas la roue.

Si vous aimez l'article, laissez un pouce bleu, cela me motiverait vraiment à en écrire davantage. Merci ?.

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!