反向循環不起作用

Question

我有一個函數animate（），它會用循環多次更改div背景。我創建了另一個函數animateReverse（），以便以相反的順序播放圖像序列，從最後一個圖像開始到最後一個圖像開始。 animate（）運行良好，但animateReverse（）不起作用。我究竟做錯了什麼？

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

少硬編碼和finaly答案：

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

您的循環內animateReverse()電話setTimeout() 17次，順序是：

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); 

所以當然圖像＃0定時器將先觸發，則定時器圖像＃1下，和等等。

inside animateReverse()您需要反轉圖像索引或超時值，但不能同時使用兩者。