Salut, je m'appelle Nicolas Brondin-Bernard et bienvenue dans le podcast de Code Garage.
Dans l'épisode d'aujourd'hui, on va parler du concept de debounce.
Le debounce, qu'est-ce que c'est ? L'origine du concept de debouncing, il vient du monde
de l'ingénierie électronique et il existe pour limiter une contrainte physique dans
nos appareils de tous les jours.
Si on prend par exemple un circuit électronique, simplement composé d'un interrupteur.
Quand cet interrupteur est appuyé, le signal électrique ne change pas de manière lisse
et fluide au sein du circuit électrique.
Parce que quand deux plaques de métal rentrent en contact, les vibrations émises font que
les plaques se rapprochent et s'éloignent très rapidement pendant quelques millisecondes
pendant le contact.
Ces vibrations, elles enjant donc des interférences dans le circuit, parfois quelques dizaines
d'oscillation.
Tandis que l'interrupteur lui, il n'a changé qu'une seule fois réellement d'état.
Et c'est ça qu'on va appeler du rebond ou bouncing en anglais.
Alors j'utilise le terme de debounce, on pourrait dire anti-rebond, mais vous ne le
trouverez jamais appelé comme ça sur internet, donc c'est pour ça que je vous le donne
directement en anglais.
Pour corriger ces anomalies du signal, des circuits électroniques sont prévus pour
ajouter un délai et faire en sorte que le signal ne change d'état qu'au maximum
toutes les x millisecondes par exemple.
Et c'est ça qu'on va appeler le debouncing.
En sortie d'un interrupteur qui comprend un circuit de debounce, le signal, il changera
qu'une seule fois d'état et de manière parfaitement nette puisqu'on aura éliminé
toutes ces interférences du rebond des petites lamelles de métal.
Et maintenant, qu'est-ce que c'est le debounce dans la programmation ?
Eh bien, tout simplement, quand on fabrique un circuit électronique commandé par programmation,
souvent dans des systèmes qu'on va appeler des systèmes embarqués, il est également
nécessaire de pallier au défaut de certains boutons, comme j'ai expliqué juste avant,
ou de certains capteurs même qui peuvent envoyer des informations parasites de temps
à autre.
Mais dans la programmation logicielle ou dans le web, on retrouve également beaucoup
d'exemples de debounce.
Vous connaissez par exemple ces chants textes qui effectuent une recherche au fur et à
mesure que vous ajoutez des caractères.
Eh bien, pour des raisons d'optimisation et d'expérience utilisateur, la plupart
utilisent une fonction de debounce justement pour éviter d'envoyer une nouvelle requête
à chaque fois que vous ajoutez une lettre.
Par exemple, si vous tapez plus d'une lettre toutes les 500 ms, on va dire, alors une seule
requête sera envoyée lorsque vous aurez fini de taper ou lorsque vous aurez fait une pause
tout simplement, au lieu d'envoyer 6 requêtes différentes pour un mot de 6 lettres.
Donc voilà, c'est un concept qui est très simple et comment est-ce qu'on le met en
pratique ?
Eh bien souvent, on va, lorsqu'on va commencer à taper, par exemple, on va reprendre notre
exemple de la recherche.
Quand on va commencer à taper une lettre, au lieu d'envoyer la requête, on va démarrer
un timer qui va dire, eh bien, c'est simple, dans 500 ms par exemple, tu vas envoyer la
requête.
Sauf que lorsqu'une deuxième lettre est tapée, on va regarder s'il y a déjà un timer qui
est en cours, si un timer qui est en cours, on va le stopper et on va en redémarrer un
de 500 ms.
Donc ce n'est qu'à la fin, en fait, quand il y aura une lettre qui aura été tapée
et qu'on aura attendu 500 ms, que, eh bien, la requête va être envoyée.
Si jamais vous voulez un exemple concret avec du code pour voir comment ça marche en JavaScript,
je vous invite à lire les notes de l'épisode.
Vous aurez le lien vers l'article d'origine de cet épisode avec un exemple en JavaScript
qui est écrit et que vous pouvez réutiliser dans vos projets.
Évidemment, il existe des fonctions pré faites de debouts dans la majorité des bibliothèques
utilitaires, que ce soit dans n'importe quel langage et dans JavaScript, vous pouvez le
trouver dans underscore.js ou dans l'Odache par exemple.
J'espère que cet épisode vous aura été utile et que vous aurez appris quelque chose.
Moi, je vous donne rendez-vous sur Code Garage.
Code Garage, qu'est-ce que c'est ? C'est une plateforme de formation pour tous les développeurs
et toutes les développeurs, ce qui veulent continuer à toujours se former et à monter
en compétences.
Pour 19h99 par mois, vous avez accès à tous les cours complets et rédigés par des experts
disponibles sur la plateforme.
Donc, je vous dis à la semaine prochaine pour un prochain épisode du podcast ou à très
vite sur Code Garage, le blog, les anciens épisodes du podcast, la newsletter, peu importe.
Voilà, à la semaine prochaine.
Salut !