La funzione setTimeout

Un argomento molto interessante per quanto riguarda la creazione di animazioni in jQuery peri nostri siti web è sicuramente quello della gestione del tempo. Attraverso questo articolo vi propongo uno script in cui diverse funzioni saranno ripetute ogni X secondi.

Per realizzare questo “timer” è necessario ricorrere ad un’unica funzione: setTimeout.

 
setTimeout(function,milliSeconds,lang)
 

La funzione setTimeout serve per chiamare una funzione(function) dopo uno specifico numero di millisecondi (milliSeconds); l’ultimo parametro è opzionale serve per indicare il linguaggio di scripting.

Con una dicitura del genere la funzione F sarà richiamata infinite volte ogni X secondi:

 
function F()
{
       /*
       . . .  function
       */
       setTimeout("F()",X);
}
 

E quindi eccoci allo script: DEMO

HTML

 
<div id="contBox">
       <div id="boxPh" class="box">
              Do you<br />like<br/>this<br />script?
      </div>
      <div id="boxCount">5</div>
</div>
 

 jQUERY

 
$(document).ready(function()
            {
                       cambia();
                       timer();
            });
                var count_timer = 5;
                var count_phrases = 0;
                var array = ["Do you<br />like<br/>this<br />script?","It is<br />quite<br />simple!<br /> (:","And what<br />about<br/> this<br />theme?"];
            function cambia() {
                       $('#boxPh').html(array[count_phrases]);
                       count_phrases++;
                       if (count_phrases == 2){count_phrases=0}
                       setTimeout("cambia()",5000);
                }
            function timer(){
                       $('#boxCount').html(count_timer);
                       count_timer--;
                       if (count_timer == 0){count_timer=5}
                         setTimeout("timer()",1000);
            }