Ce n'est pas seulement un autre article qui essaie d'expliquer comment le déboncage ou la limitation fonctionne au niveau du code, mais c'est une illustration pour se souvenir et visualiser le concept afin que vous puissiez les appliquer pratiquement à votre travail.

Personnellement, je me retrouve souvent à oublier les concepts de débouchement et de limitation, donc quand quelqu'un me demande de les expliquer - ou si une question apparaît dans une interview - je clignote simplement ?. Pour éviter cela, j'ai fait une page simple pour me rafraîchir la mémoire. Si vous ne voulez pas vous sentir comme un imposteur suivant ?.

Dans le code ci-dessous, j'ai réglé le retard sur 2 secondes pour le débouchement et l'accélérateur. Essayez de cliquer sur des aliments aléatoires et de faire une pause.

Indice

• L'analogie du restaurant
• Explication
  • Pourquoi déboucher ou gazé de toute façon?
  • js handler d'événements
  • Qu'est-ce qui ne va pas ?
  • déboucher
  • Étrangler

lien vers la page

Analogie du restaurant

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

L'analogie ici

• ? Lire des aliments =? Bouton cliquer
• ? ‍? Serveur qui va à la cuisine =? Api appel

et imaginez qu'il existe trois types de serveurs différents au restaurant qui pourraient vous servir:

1. ? ‍️ serveur normal

   • prend une note à chaque fois que vous mentionnez un élément
   • fonctionne vers la cuisine pour chaque élément individuel
   • comme js gérer chaque événement immédiatement

2. ? Serveur débouché

   • Lorsque vous commencez à lire le menu, il vous attendra pour que vous vous arrêtiez pendant 2 secondes avant de prendre la commande.
   • comme attendre qu'un utilisateur finisse de taper avant de passer un appel API

3. ? ‍? Serveur throtted

   • ne prend les commandes qu'une fois toutes les 2 secondes
   • Si vous mentionnez plusieurs éléments 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é utilisateur

Remarque: la principale différence est:

• Debouncing: attend l'activité (clic du bouton) pour s'arrêter pendant un temps spécifié pour déclencher
• Throttling: déclenche à intervalles réguliers, quelle que soit le moment où une activité est arrêtée
• 2 Sec est aussi quelque chose que j'ai utilisé comme exemple, il peut être n'importe quel TimePeriod

Explication

Pourquoi déboucher ou faire l'accélération de toute façon?

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

Handleurs d'événements dans JS

Dans JS, les gestionnaires d'événements ne sont que des fonctions qui s'exécutent lorsque des événements spécifiques (comme les clics, la frappe ou le défilement) se produisent. Par défaut, ces gestionnaires tireront chaque fois que l'événement se produit - chaque touche, chaque clic ou 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?

Dites par exemple que vous avez un bouton qui ferait un appel API

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

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

La fonction ci-dessus exécutera le makeApicall () sur chaque bouton cliquez (c'est-à-dire) si vous parvenez à appuyer sur 10 fois dans 1 SEC, devinez ce que vous avez passé 10 appels API en 1 sec. C'est le comportement par défaut.

Mais le licenciement d'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 le débouchement entrent en image.

Si vous voulez retirer une définition de cet article, c'est celle-ci. Ligrot et le débouchement sont deux façons les plus courantes de contrôler le taux de réponse d'un écouteur d'événement.

Débouchant

Je ne vais pas expliquer le code pour le débouchement car cela peut simplement être importé de Lodash, nous verrons plutôt où vous pouvez réellement l'utiliser.

Utilisez Debouncing lorsque vous souhaitez passer l'appel API uniquement si l'utilisateur a cessé de taper pendant un certain temps ou a cessé de cliquer pendant un certain temps.

Dans notre exemple, si l'utilisateur continue de cliquer sur le bouton même pendant 5 min consécutifs, l'appel API ne sera fait qu'une seule fois.

Donc deux choses se produisent ici:

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

Étrangler

Le gaz est comme un intervalle. Utilisez-le lorsque vous ne voulez pas attendre que l'utilisateur s'arrête plutôt de faire un appel API à chaque intervalle dire 2 secondes

Exemple Si l'utilisateur tape pendant 1 minute droite sans faire une pause, alors pour les 2 secondes, vous appelleriez l'API.

Conclusion

Comme mentionné dans l'article, il ne s'agit pas d'expliquer comment les fonctions fonctionnent plutôt pour visualiser et comprendre pourquoi elle est utilisée. Je vous recommande sûrement de comprendre au niveau du code comment ils fonctionnent, mais personnellement, utiliserait toujours le débouchement et l'accélérateur fournis par la bibliothèque Lodash et non pour réinventer la roue.

Si vous aimez l'article, laissez un coup de pouce, cela me motiverait vraiment à écrire plus. Merci ?.