Qu'est-ce que le débouchement dans JavaScript?

Avez-vous déjà cliqué sur un bouton d'une page Web et vous avez l'impression de prendre un peu trop de temps pour charger du contenu. De même, tout en tapant la barre de recherche, la recherche prend un court délai pour afficher les résultats. Même si vous ne l'avez jamais ressenti, laissez-moi vous dire que les développeurs ont utilisé la fonction déboucher Pour atteindre ce retard et ce retard est très pratique lorsqu'il s'agit d'arrêter les demandes inutiles au serveur.

Par exemple, si vous avez défini une fonction sur la fenêtre de la fenêtre et imaginez maintenant appeler la fonction en continu pendant que nous redimensions notre fenêtre. Est-ce une façon efficace de le faire? Bien sûr pas parce que appeler cette fonction spécifique en continu n'est pas nécessaire et donc cela affecterait les performances.

Dans cet article, nous parlerons de ce qui est le débouchement en JavaScript et de sa mise en œuvre avec quelques exemples.

Qu'est-ce que le débouchement?

La définition la plus simple du débouchement serait qu'il s'agit d'une technique de programmation destinée à restreindre l'appel d'une fonction longue (plus de calculs) fréquemment ou déclencher une fonction en cas de besoin. Supposons que vous êtes un développeur et que vous créez une barre de recherche. Vous voudriez afficher des suggestions qu'une fois que l'utilisateur termine la frappe qui ne signifie pas chaque touche. Par conséquent, en utilisant le débouchement en javascript, on peut améliorer les performances de leur page Web.

Comment fonctionne le débouchement? Eh bien, si je le mets en mots simples, le débouchement fonctionne en mettant une minuterie «attendre» avant l'exécution d'un morceau de code spécifique. Et si, en raison d'une situation, le même processus est réexécuté. Ensuite, plutôt que de former une file d'attente de deux mêmes événements, nous arrêtons l'ancien processus et nous nous concentrons uniquement sur l'exécution de la récente. Cela nous sauve également d'une situation de «col de bouteille». Pour ceux qui ne connaissent pas le «goulot d'étranglement», c'est un état qui se produit lorsque vous essayez de pousser plus de choses à l'écran que la puissance de traitement du serveur

Mise en œuvre de débouchement

Nous pouvons implémenter le débouchement dans JavaScript en utilisant les étapes ci-dessous:

• Créez une minuterie de retard à l'intérieur de la fonction et définissez-la sur 0
• Réinitialisez la minuterie si la fonction spécifiée est à nouveau invoquée
• Appelez la fonction Débounce uniquement lors du délai d'expiration.

Partie de codage html

La première étape de la mise en œuvre de débouchement dans JavaScript nécessitera un élément HTML sur lequel nous attribuerons l'événement de clic.

Créez d'abord un élément de bouton dans HTML:

Cliquez sur moi

La balise de script est utilisée pour référencer le fichier où nous rédigerons notre code JavaScript qui est code.js. Nous avons également utilisé le identifiant Attribut que nous utiliserons pour référencer l'élément bouton de HTML dans JavaScript.

Maintenant que nous avons terminé avec la partie codage HTML, implémentons la fonction de débouchement dans JavaScript.

Partie de codage javascript

La fonction de mise en œuvre de la technique de débouchement se déroulerait comme ceci:

// Obtenez une référence du bouton
var mybtn = document.getElementById ("mybtn");
// Déboucher la fonction définie
const Debounce = (myfunc, delaytime) =>
Laissez Debouncetimer;
return function ()
const Context = this;
const args = arguments;
ClearTimeout (DebounCetimer);
DebounCetimer = setTimeout (() => myfunc.appliquer (contexte, args), retardtime);


// Ajouter un écouteur d'événement au bouton
mybtn.addEventListener ('click', homologue (function ()
// Alerte sera vue après deux secondes de temps libre
alert ("Hello World après 2 secondes");
, 2000));

Dans le code ci-dessus, nous obtenons d'abord la référence du bouton spécifié dans HTML et ajoutons un événement de clic sur ce bouton. Chaque clic de bouton invoquerait la fonction de débouçage.

Dans le déboucher fonction, nous prenons deux arguments, le premier est la fonction et la seconde est le temps de retard ou le temps de sortie. Ensuite, nous avons initialisé le debouncetimer qui suivra la période de retard.

Lorsqu'un utilisateur clique sur le bouton une fois, la fonction de débocage sera appelée après le retard.

Donc, si l'utilisateur clique sur le bouton, puis clique à nouveau sur le bouton avant la fin du retard, le temporisateur se réinitialise et le retard initial sera effacé.

Toutes ces fonctionnalités sont obtenues par la fonction ClearTimeout ().

Voyons la sortie:

Nous pouvons voir que lorsque nous cliquons sur le bouton, nous ne voyons aucune sortie. Cependant, lorsque nous avons cliqué sur le bouton la dernière fois et l'avons laissé, nous avons vu le message d'alerte après deux secondes. Par conséquent, nous pouvons conclure que Chaque clic appelle la fonction de déboucage et réinitialise la minuterie en retardant l'appel.

Conclusion

Debouncing est une technique de programmation utilisée par les développeurs pour limiter le nombre d'appels à un événement ou ne déclencher qu'une fonction en cas de besoin ou pour un seul cas d'utilisation. La technique de débouchement est appliquée dans une fonction longue qui a beaucoup de calculs, nous évitons donc l'appel inutile de cette fonction. Pour être spécifique, le débouchement peut être appliqué dans des barres de recherche, des barres de texte suggestives, des pages Web de chargement de contenu E.G Facebook, Instagram, etc.

Dans cet article, nous avons discuté de ce qu'est le débouchement en javascrip.