"debounce" et "throttle" sont deux fonctions JavaScript qui permettent de limiter la répétition d'exécutions d'un code, et d'optimiser l'impact sur la performance globale d'une application Web.
Empêcher toute exécution de code avant un délai écoulé avec "debounce"
Un code utilisé avec "debounce" est exécuté seulement lorsqu'un délai est écoulé après sa dernière exécution. Si une nouvelle exécution est demandée alors que le délai n'est pas écoulé, le délai repart à zéro et retarde à nouveau l'exécution du code.
La fonction "debounce" prend deux arguments :
- Code à exécuter encapsulé dans une fonction
- Délai à écouler pour exécuter le code
function debounce(f, d) {
d = d || 250;
var t = null;
return function() {
var c = this, a = arguments;
clearTimeout(t);
t = setTimeout(function() {
f.apply(c, a);
}, d);
};
}Par exemple, à chaque fois qu'un utilisateur effectue une saisie dans champs texte, il peut être optimal d'attendre la fin de saisie pour exécuter un code spécifique (requête AJAX, etc) plutôt que d'exécuter systématiquement le code à chaque fois qu'il presse une touche de clavier.
var champs_texte = document.getElementById('champs_texte');
champs_texte.addEventListener('input', debounce(function() {
console.log(champs_texte.value);
}, 500));Espacer les exécutions répétitives avec "throttle"
Un code utilisé avec "throttle" est exécuté seulement par intervals de temps.
La fonction "throttle" prend deux arguments :
- Code à exécuter encapsulé dans une fonction
- Interval de temps entre chaque exécution du code
function throttle(f, d) {
d = d || 250;
var l, t = null;
return function() {
var c = this,
a = arguments,
n = (new Date()).getTime();
if (l && n < l + d) {
clearTimeout(t);
t = setTimeout(function() {
l = n;
f.apply(c, a);
}, d);
} else {
l = n;
f.apply(c, a);
}
};
}Par exemple, à chaque fois qu'un utilisateur fait défiler la barre de défilement de la fenêtre, il peut être optimal de récupérer la position du défilement à intervals régulier pour exécuter un code spécifique (requête AJAX, etc) plutôt que d'exécuter systématiquement le code à chaque pixel défilé.
window.addEventListener('scroll', throttle(function() {
console.log(window.scrollY);
}, 1000));Cet article vous a-t-il été utile ?
Super :)
Merci d'avoir donné votre avis !
Oups :(
Merci d'avoir donné votre avis qui va nous permettre de nous améliorer !