Slideshow di contenuti in jQuery con i deferred objects

I deferred objects di jQuery hanno sancito una svolta nella storia della libreria. Per la prima volta viene applicato il concetto di queue e di stack non solo alle animazioni ma a qualsiasi blocco di codice avente una funzione propria.

In questo articolo, applicando questa tecnica agli slideshow di contenuti possiamo separarne due aspetti cruciali: l'azione di scorrimento e l'animazione su ciascuna slide.

Supponiamo di avere uno slideshow desc animate()

<div id="slideshow">
  <div id="slideshow-wrapper">
      <div class="slide">Slide 1<div class="desc">Descrizione</div></div>
      <div class="slide">Slide 2<div class="desc">Descrizione</div></div>
      <div class="slide">Slide 3<div class="desc">Descrizione</div></div>
  </div>
</div>

Con i deferred objects eq() pipe()

var Slider = new function() {
  var timer = null,
      index = 0,
	  wrapper = $('#slideshow-wrapper'),
	  slides = $('div.slide', wrapper);
  var slide = function() {
      timer = setInterval(function() {
	      index++;
		  if(index == slides.length) {
		    index = 0;
			$('div.desc', wrapper).hide();
		  }
		  $.Deferred(function(def) {
			  def.pipe(function() {
			      return wrapper.animate({
				      left: - slides.eq(index).position().left
				  }, 1000);
		      }).pipe(function() {
			      return slides.eq(index).find('div.desc').fadeIn(1000);
			  });
		  }).resolve();
      }, 2000);
  };
  this.init = function() { slide();  };   
}();
$(function() {
    Slider.init();
});

All'interno di ciascuna funzione dei due metodi pipe()

var move = function(element, set, index) {
    element.animate({
      left: - set.eq(index).position().left
    }, 1000);
};

Il punto è questo: suddividere logicamente i compiti in microporzioni di codice, ciascuna con un compito preciso. In questo modo il codice finale è molto più chiaro, e questo è utilissimo nel caso di effetti o animazioni complesse.

L'esempio finale e il codice completo è disponibile in allegato.