Reverse-Loop funktioniert nicht

Question

Ich habe eine Funktion animate(), die einen div-Hintergrund viele Male mit einer Schleife ändern wird. Ich habe eine andere Funktion, animateReverse(), erstellt, um die Bildsequenz in der umgekehrten Reihenfolge abzuspielen, beginnend mit dem letzten Bild, das am ersten endet. animate() funktioniert gut, aber animateReverse() funktioniert nicht. Was mache ich falsch?

function changeImage(index) { 
    return function() { 
     var currentImage = './img/1/'+(index+1)+'.jpg'; 
     $('#screen').css('background-image','url('+currentImage+')'); 
    } 
} 

function animate(){ 
    var numberOfPictures = 17; 
    for (var i = 0; i < numberOfPictures; i++) { 
     setTimeout(changeImage(i), i * waitPeriod); 
    } 
}; 

var waitPeriod = 150; 

function animateReverse(){ 
    var numberOfPictures = 17; 
    for (var i = numberOfPictures - 1; i >= 0; i--) { 
     setTimeout(changeImage(i), i * waitPeriod); 
     } 

}; 

Answer 1

weniger hart Code und finaly die Antwort:

function changeImage(index,place) { 
    return function() { 
     var currentImage = './img/'+place+'/'+(index+1)+'.jpg'; 
     $('.slider').css('background-image','url('+currentImage+')'); 
    } 
} 

function anime(linear,x) { 
     changeImage(); 
     // number of pictures 
     var numberOfPictures = 5; 
     // time 
     var waitPeriod = 700; 
    if(linear == true){ 
     for (var i = 0; i < numberOfPictures; i++) { 
      setTimeout(changeImage(i,x), i * waitPeriod); 
     } 
    } else { 
     for (var i = numberOfPictures-1; i >= 0; i--) { 
      setTimeout(changeImage(i,x), (numberOfPictures - i) * waitPeriod); 
     } 
    } 
    }; 

Answer 2

Ihre Schleife innerhalb animateReverse() Anrufe setTimeout() 17-mal, in dieser Reihenfolge:

setTimeout(changeImage(16), 16 * 150); 
setTimeout(changeImage(15), 15 * 150); 
setTimeout(changeImage(14), 14 * 150); 
setTimeout(changeImage(13), 13 * 150); 
setTimeout(changeImage(12), 12 * 150); 
setTimeout(changeImage(11), 11 * 150); 
setTimeout(changeImage(10), 10 * 150); 
setTimeout(changeImage(9), 9 * 150); 
setTimeout(changeImage(8), 8 * 150); 
setTimeout(changeImage(7), 7 * 150); 
setTimeout(changeImage(6), 6 * 150); 
setTimeout(changeImage(5), 5 * 150); 
setTimeout(changeImage(4), 4 * 150); 
setTimeout(changeImage(3), 3 * 150); 
setTimeout(changeImage(2), 2 * 150); 
setTimeout(changeImage(1), 1 * 150); 
setTimeout(changeImage(0), 0 * 150); 

so natürlich der Timer für Bild # 0 wird Feuer zuerst, dann der Timer für Bild # 1 weiter, und bald.

Innerhalb animateReverse() müssen Sie entweder den Bildindex oder den Timeout-Wert, aber nicht beide umkehren.