Une des plus grandes erreurs dans les code javascript est l’absence de la fonction anti-rebond (Debounce).

Si votre application web utilise JavaScript pour accomplir des tâches une fonction Debounce est essentiel pour s’assurer qu’une tâche ne se déclenche pas si souvent et met en péril la performance du navigateur.

Pour ceux qui ne savent pas ce que c’est une fonction Debounce

la fonction anti-rebond (Debounce) limite la vitesse à laquelle une fonction peut s’exécuter.

Un exemple rapide: vous avez un auditeur de redimensionnement de la fenêtre qui fait des calculs de dimension des éléments et (éventuellement) repositionne quelques éléments. Ce n’est pas une lourde tâche en elle-même, mais étant tiré à plusieurs reprises après de nombreuses redimensionne va vraiment ralentir votre site vers le bas. Pourquoi ne pas limiter la vitesse à laquelle la fonction peut tirer?

// Voici une fonction debounce
// (extraite du framwork Underscore.js)
function debounce(func, wait, immediate) {
	var timeout;
	return function() {
		var context = this, args = arguments;
		var later = function() {
			timeout = null;
			if (!immediate) func.apply(context, args);
		};
		var callNow = immediate && !timeout;
		clearTimeout(timeout);
		timeout = setTimeout(later, wait);
		if (callNow) func.apply(context, args);
	};
};

Voici un Exemple pratique d’utilisation de la fonction debounce:

var onResize = debounce(function() {
   // le code a executer
}, 250);
window.addEventListener('resize', onResize);