當我添加單擊事件時，我的JavaScript函數運行重複（？）

Question

免責聲明：我正在嘗試學習JavaScript。我不是個聰明人。

所以，我做了一個JQuery圖像滑塊。我很自豪。有用。它加載圖像，並且一天一天地，一天一天地顯示它們。生活很好。

然後我想添加導航到滑塊，黑暗降臨到我的小王國。

當我點擊其中一個按鈕時，我會調用我的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

您遇到的問題是，動畫時間和點擊TRIGER之間的同步。 此外，當用戶單擊按鈕時，您並未取消下一個計劃的操作。 supose我們在幻燈片2上，這意味着已經有一個計時器被顯示出幻燈片3，當我點擊按鈕1時，第一個計時器將保持runig顯示幻燈片3，另一個計時器將被創建以顯示幻燈片1.我解決這通過保持定時器並清除它。

另一個問題是，在你的adnimation：fadeIn回調你正在添加點擊lisiner按鈕，我認爲會添加許多listiner，所以當你點擊兩次你會有相同的列表附加兩次，因此在三次被稱爲兩次。 這是我的糾正作品在我身邊。可能有其他問題。 承擔點擊和轉換之間的時間。例如，如果您將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; 
    }); 

}）;