javascript - 当我添加点击事件时，我的 javascript 函数会重复运行(？)

Question

免责声明:我正在尝试学习 JavaScript。我不是一个聪明人。

所以，我制作了一个 Jquery 图像 slider 。我很自豪。有用。它加载图像，并日复一日地逐个显示它们。生活是美好的。

然后我想向 slider 添加导航，黑暗降临到我的小王国。

当我单击其中一个按钮时，我会调用 LoadSlide 函数并传递适当的索引 LoadSlide(NewIndex)。然后它运行该函数，但它还继续使用标准 LoadSlide(index+1) 参数运行该函数。因此，无需单击任何按钮，它就会像这样运行:

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

然后我单击一个按钮(幻灯片 2)，另一个循环同时开始:

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

请告诉我，传说的守护者。如果这条龙被杀死，你将享受许多少女和无尽的麦酒。

可怜的代码在这里:http://jsfiddle.net/V6svT/2/

Answer 1

您遇到的问题是动画时间和点击触发器之间的同步。 此外，当用户单击按钮时，您不会取消下一个计划的操作。 假设我们在幻灯片 2 上，这意味着已经有一个计时器应该显示幻灯片 3，当我单击按钮 1 时，第一个计时器将保持运行以显示幻灯片 3，并且将创建另一个计时器以显示幻灯片 1。我解决了这个问题通过按住计时器并清除它。

另一个问题是，在您的 adnimation: fadeIn 回调中，您添加了按钮的单击 lisiner，我认为该按钮会添加许多监听器，因此当您单击两次时，您将附加相同的监听器两次，因此在触发时会调用两次。 这是我这边的修正作品。可能还有其他问题。 请注意单击和转换之间的时间。例如，如果您将 fadeIn 时间设置为与 setTimeout 相同的时间，您也会遇到同样的问题。

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

});​