Javascript, en boucle un ensemble d'instructions (set timeouts)

Question

Je veux boucler une animation qui change essentiellement la position de l'arrière-plan jamais 150 millisecondes. Il ne se fane pas ou quoi que ce soit, il doit juste arriver encore et encore. Mais je n'arrive pas à trouver une solution qui boucle ces instructions.

setTimeout(function() { 
     $('div.arrow').css('backgroundPosition', '0 -47px'); 
    }, 150); 

setTimeout(function() { 
     $('div.arrow').css('backgroundPosition', '0 -94px'); 
    }, 250); 

setTimeout(function() { 
     $('div.arrow').css('backgroundPosition', '0 -141px'); 
    }, 350); 

setTimeout(function() { 
     $('div.arrow').css('backgroundPosition', '0 -188px'); 
    }, 450); 

setTimeout(function() { 
     $('div.arrow').css('backgroundPosition', '0 -235px'); 
    }, 550); 

Answer 1

Utilisation setInterval au lieu de setTimeout.

utiliser également une variable globale pour voir où l'image d'arrière-plan, plutôt que de mettre beaucoup de temps morts ...

Vous finirez avec quelque chose comme ceci:

var currPos = 0; 
setInterval(function(){ 
    currPos = currPos-47; 
    if(currPos < -235){ 
     currPos = 0; 
    } 
    $('div.arrow').css('backgroundPosition','0 '+currPos+'px'); 
}, 150); 

Voir exemple ici: http://jsfiddle.net/aUBNw/

Answer 2

var div = $('div.arrow'); 
function tim(){ 
setTimeout(function() { 
     div.css('backgroundPosition', '0 -47px'); 
    }, 150); 

setTimeout(function() { 
     div.css('backgroundPosition', '0 -94px'); 
    }, 250); 

setTimeout(function() { 
     div.css('backgroundPosition', '0 -141px'); 
    }, 350); 

setTimeout(function() { 
     div.css('backgroundPosition', '0 -188px'); 
    }, 450); 

setTimeout(function() { 
     div.css('backgroundPosition', '0 -235px'); 
    }, 550); 
setTimeout(function() { 
     tim(); 
    }, 550); 
} 
tim(); 

simplement appeler lui-même sera une fois qu'il est terminé