CODEWITHSUNDEEP
javascriptloops
Fernando Souza
Fernando Souza

Reputation: 1779

Reverse loop not working

I have a function animate() that will change a div background many times with a loop. I created another function, animateReverse(), in order to play the image sequency in the reverse order, starting from the last image ending at the first. animate() is working well but animateReverse() isn't working. What am I doing wrong? 

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

};

Upvotes: 0

Views: 276

Answers (2)

Fernando Souza
Fernando Souza

Reputation: 1779

Less hard code and finaly the answer:

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

Upvotes: 0

Dan O
Dan O

Reputation: 6090

your loop inside animateReverse() calls setTimeout() 17 times, in this order:

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 of course the timer for image #0 will fire first, then the timer for image #1 next, and so on.

inside animateReverse() you need to reverse either the image index or the timeout value, but not both.

Upvotes: 1

Related Questions