Si on exécute du code Javascript lors du redimensionnement de la fenêtre du navigateur (on resize), il peut être justifié d'optimiser le nombre d'appels afin de sauver des ressources processeur.
Une façon simple de sauter quelques rafraîchissements et d'utiliser un timer (setTimeout conjointement à clearTimeout).
Code habituel
$(window).bind('resize', function(e){ // Code ici });
Code optimisé
$(window).bind('resize', function(e){ window.resizeEvt; $(window).resize(function() { clearTimeout(window.resizeEvt); window.resizeEvt = setTimeout(function() { // Code ici (exécuté après le 250 millisecondes) }, 250); }); });
Code JQuery optimisé
(function($,sr){ // debouncing function from John Hann // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ var debounce = function (func, threshold, execAsap) { var timeout; return function debounced () { var obj = this, args = arguments; function delayed () { if (!execAsap) func.apply(obj, args); timeout = null; }; if (timeout) clearTimeout(timeout); else if (execAsap) func.apply(obj, args); timeout = setTimeout(delayed, threshold || 100); }; } // smartresize jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; })(jQuery,'smartresize'); // Utilisation: $(window).smartresize(function(){ // Code ici });