My javascript function runs in duplicate(?) when I

Question

Disclaimer: I am trying to learn javascript. I am not a clever man.

So, I made a Jquery image slider. And I was proud. It works. It loads images, and it displays them one-after-another, day-in, day-out. Life was good.

Then I wanted to add navigation to the slider, and darkness fell upon my little kingdom.

When I click on one of the buttons, I call my LoadSlide function passing on the appropriate index LoadSlide(NewIndex). And then it runs the function, but it also continues running the function with the standard LoadSlide(index+1) argument. So without clicking any buttons it runs like so:

slide1 -> (6500ms) -> slide2 -> (6500ms) -> slide3 -> (6500ms) -> slide1 ...

And then I click a button (slide 2), and another loop starts in parallel:

slide1 -> (6500ms) -> slide2 -> (6500ms) -> slide3 -> (6500ms) -> slide1 ...
   [click] slide2 -> (6500ms) -> slide3 -> (6500ms) -> slide1 -> (6500ms)...

Please advise me, keepers of the lore. Thou shall enjoy many maidens and endless measures of ale, if this dragon is slain.

Pitiful code is here: http://jsfiddle.net/V6svT/2/

Answer 1

The issue you are having is the synchronisation between the animation time and the click triger. Also you are not cancelling the next scheduled action when a user click on the button. supose we are on slide 2 meaning there is already a timer that is supossed to show slide 3, when i click on button 1 the first timer will keep runig to show slide 3 and another timer will be created to show slide 1. I solve this by holding the timer and clearing it.

Another issue is that in your adnimation: fadeIn callback you are adding the click lisiner for button which I think will add many listiners so when you click twice you will have the same listner attached twice therefore called twice when trigered. Here is my correction works on my side . might have other issues . Bear in ming the timing between click and transition. for instance if you set fadeIn time to the same time of setTimeout you will have the same issue.

$(function () {
//edit
var timer='undefined';

var slides = new Array();
    slides[0] = 'http://i.imgur.com/UwRVo.png';
    slides[1] = 'http://i.imgur.com/wv08B.png';
    slides[2] = 'http://i.imgur.com/MlUbx.png'; 

   var max = $(slides).length;

var isBottom = false;

makeSlideBtns(max);

if(max>0) 
{
    LoadSlide(0,max);

}

function LoadSlide(index,max) {
     clearTimeout(timer);
     if(index<max)
        {
            var el0 = $("#slidebottom");
            var el1 = $("#slideover");
            var sbtn = $("#slidebtns li")[index];
            var img = new Image();
             $(sbtn).css('background-color', '#000'); 

            $(img).load(function () {
                $(this).css('display','none');
                if(isBottom == true)
                { 
                    $(el1).html(this);
                    $(el1).css('z-index', '3');
                    $(el0).css('z-index', '2');
                    console.log("el1 " + index);

                } else {
                    $(el0).html(this);
                    $(el1).css('z-index', '2');
                    $(el0).css('z-index', '3');
                    console.log("el0 " + index);

                }
                isBottom = !isBottom;

                function nextSlide () {                                                                      
                                LoadSlide(index+1,max);
                                console.log("sbtn: " + sbtn);
                                $(sbtn).css('background-color', '#fff');
                };

                $(this).fadeIn(2000,function() {
                        timer=setTimeout(nextSlide, 5000);     
                });


            }).error(function () {             
                LoadSlide(index+1,max);
            }).attr('src', slides[index]);  

        } else {
            LoadSlide(0,max)
        }
}

function makeSlideBtns (max) {

    for(i=0; i<max; i++) {
        var num = i + 1;
        $("#slidebtns").append('<li><a>' + num + '</a></li>');
    }
};

//add this in your loop will add more as you click
$("#slidebtns li").click(function () { 
     $("#slidebtns li").css('background-color', '#fff');                                               
     var i=$(this).index();             
      LoadSlide(i,max);
      return false;
  });

});​