[JavaScript] Fonction asynchrone : setTimeout()

dmo95

Membre actif
24 Mai 2007
584
14
Bonjour,

Je souhaite réaliser un petit effet vraiment tous simple, qui consiste à changer l'image d'une div au bout de 3 secondes, et ce en bouclant pour donner l'impression d'une vidéo qui défile.

Voici mon code :
Bloc de code:
function changePics(picture){
        
       $("#photos_ex").fadeOut("slow");
       setTimeout('$("#photos_ex").css({ backgroundImage : "url(<?php echo bloginfo("template_url"); ?>/images/'+picture+')"});', 750);
       $("#photos_ex").fadeIn("slow");
}

setTimeout('changePics("picture2.jpg")', 3000);
setTimeout('changePics("picture3.jpg")', 3000);
setTimeout('changePics("picture1.jpg")', 3000);
Or la fonction setTimeout() est une fonction asynchrone, donc ce code ne fait pas le comportement escompté. En effet, il modifie correctement les images mais il fait la modification des 3 quasiment instantanément à quelques millièmes près (et les 750ms de la fonction).

Par ailleurs je pose la quéstion tout de suite, mais je ne sais pas comment rendre cette effet visuel car une boucle infinie en JavaScript fait monter en puissance votre machine !! Seule issue quitter le navigateur !!

Un magnifique exemple içi avec le défilement des sites dans le header.

Cordialement, DMO

PS : développement avec jQuery pour ceux qui n'auraient remarqué ;)
 
Ok merci, je testerais ça ce soir. J'ai consulté un peu les possibilités de la fonction ca à l'air de correspondre à mes besoins.

Je vous tiens au courant ;)