I timer JavaScript in jQuery servono per creare animazioni cicliche e ripetute nel tempo. Il segreto del loro funzionamento sta nell'intervallo (in millisecondi) specificato per ogni ripetizione del timer. Esso deve sempre essere uguale alla somma degli intervalli delle animazioni. Vediamo due esempi.
Nel primo esempio, un elemento appare e scompare modificando la sua opacità:
setTimeout(function() {
$('#test').animate({opacity: 'toggle'}, 2000);
setTimeout(arguments.callee, 2000);
}, 500);
La seconda chiamata a setTimeout() crea un timer ciclico, in quanto arguments.callee è un riferimento alla funzione del primo timer più esterno. Notate come l'intervallo del secondo timer è uguale alla durata dell'animazione (2000 millisecondi).
Il secondo esempio, invece, un elemento si sposta da destra a sinistra (e viceversa):
setTimeout(function() {
$('#test2').animate({left: 150}, 1000, function() {
$(this).animate({left: 0}, 1000);
});
setTimeout(arguments.callee, 2000);
}, 500);
Anche in questo caso la durata del secondo timer è uguale alla durata complessiva delle due animazioni (1000 + 1000 millisecondi).
setTimeout() o setInterval()?
Per quanto riguarda il controllo sulle animazioni jQuery, setTimeout() è da preferire in quanto con questo metodo riusciamo a gestire anche il tempo di inizio dell'animazione. Con setInterval() questo non è possibile, in quanto questo metodo accetta un solo valore temporale.
Potete visionare l'esempio finale in questa pagina.