Iterative function x times for loop

Question

$('.ip_button').click(function(){ var buttonValue, slideTimes; buttonValue = $(this).html(); slideTimes = parseInt(buttonValue) - 1; for (var i = 0 ; i < slideTimes; i++) { slider.gallery_next(); } }); 

Hey. I am trying to shift several images on a slider using a function that repeatedly determines the value of the -1 button and the slide works. Unfortunately, the function does this only once, no matter what the button matters. Currently the value in the button:

 <button class="ip_button">5</button> 

Function for gallery_next (); encapsulated and looks like this:

 this.gallery_next = function() { if (galleryRotating) { return; } galleryRotating = true; var elem = $(galleryId + " > li").first(); $(galleryId).append(elem.clone()); $(galleryId).animate({"left" : -imgWidth}, 650, function() { elem.remove(); galleryRotating = false; $(galleryId).css({"left" : 0}); }); 

Answer 1

animate will not end by the time the for loop calls this function again, so galleryRotation will still be true and the functions will do nothing. You need a different approach: either set a timer to call your function, say, 700 ms or (better) call rotation again in the callback that you pass to animate .