Optimiser les ressources lors du redimensionnements de la fenêtre

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
});

Source 1

Source 2