javascript - 反向循环不起作用

我有一个函数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);
      }

};

最佳答案

您在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的计时器，依此类推。

在animateReverse()中，您需要反转图像索引或超时值，但不能同时反转两者。