JS/jQuery：重用函數，防止多個函數調用

請原諒我的無知，我最近纔開始寫javascript。我不是在尋找一個開箱即用的解決方案，但更多的一些見解將幫助我自己編寫代碼。JS/jQuery：重用函數，防止多個函數調用

我正在使用全屏幕滑動面板類型的網站，並使用箭頭鍵或可點擊鏈接進行導航。

我在使用箭頭鍵導航時很好地運行了所有功能，我想要做的是在使用屏幕導航鏈接時調用相同的功能。我不知道如何做到這一點，因爲函數和變量是在鍵綁定函數中聲明的。

我的第二個問題是，我需要一種方法來防止幻燈片函數被多次調用，同時該函數仍然具有動畫效果。我曾嘗試過各種setTimeout實現，還有Ben Alman的doTimeout和debounce，但似乎無法使其正常工作。

任何幫助將不勝感激！

這裏是一個的jsfiddle與單純的版本我已經建立：http://jsfiddle.net/BKpAK/3/

而這裏僅僅是JS，如果你不想不甘示弱：

$(document).ready(function() {   

var currentSlide = 1; 

$(document).keydown(function(e){ 

    nextSlide = currentSlide + 1; 
    prevSlide = currentSlide - 1; 

    lastSlide = $(".slide").length 

    cur1 = document.getElementById("slide" + currentSlide); 
    prev1 = document.getElementById("slide" + prevSlide); 
    next1 = document.getElementById("slide" + nextSlide); 

    function moveRight(){ 
     if(currentSlide < lastSlide){ 
     $(next1).addClass('frontAndCenter').stop().animate({ 
      left: "0", 
     }, 500, function() { 
      $(this).removeClass("frontAndCenter"); 
      $(cur1).css("left", "-100%"); 
     }); 
     currentSlide = currentSlide + 1; 
     } 
     else{ 
      return false; 
     }; 
    }; 

    function moveLeft(){ 
     if(currentSlide > 1){ 
      $(prev1).addClass('frontAndCenter').stop().animate({ 
      left: "0", 
      }, 500, function() { 
      $(this).removeClass("frontAndCenter"); 
      $(cur1).css("left", "100%"); 
      }); 
      currentSlide = currentSlide - 1 
     } 
     else{ 
      return false; 
     }; 
    }; 

    switch(e.which) { 
     case 37: // left 
      moveLeft(); 
     break; 

     case 39: // right 
      moveRight(); 
     break; 

     default: return; 
    } 
    e.preventDefault(); 
}); 

$("#arrowRight").click(function() { 
    moveRight();   
}); 

$("#arrowLeft").click(function() { 
    moveLeft(); 
}); 

});

來源

2013-06-18 user2478342

聲明之外的功能鍵綁定，就像

var myFunction = function(e) { 
    bla bla bla; 
}

然後從您的keydown函數調用這個函數外

(document).keydown(function(e){ 
    myFunction(e); 
}

或從任何你想要的地方調用它。

來源

2013-06-18 16:10:05

+1。此外，對於你的第二個問題，只需聲明一個全局布爾值（僅用於文檔就緒函數的開始處）「is_sliding」初始化爲false。然後每次你想要調用該函數時，如果不是「is_sliding」，那麼就測試一下。如果不是，請將「is_sliding」設置爲true，並將「complete」回調作爲函數（）{is_sliding = false;}調用$ .animate（）方法。請參閱此回調的官方動態文檔。 – Ricola3D

對於變量，使函數在keyevent綁定之外，允許您獲取它們。 – Ricola3D

太棒了！感謝Ricola的想法，很有道理:) Guillherme-如果我將所有變量設爲全局變量，出於某種原因我無法理解...如果我要移動它們，我仍然可以從函數外調用非全局變量嗎？ – user2478342

至於你的第一個問題，你是對的。你想讓你的事件處理程序簡單。您需要將您的邏輯的事件處理程序之外：

$(document).ready(function() { 
    //I would recommend putting the logic in here to avoid creating global variables/functions. 

    var currentSlide = 1; 

    function moveLeft() { /*...reworked logic...*/ } 
    function moveRight() { /*...reworked logic...*/ } 

    $(document).keydown(function(e){ 
     switch(e.which) { 
      case 37: // left 
       moveLeft(); 
      break; 

      case 39: // right 
       moveRight(); 
      break; 

      default: return; 
     } 
     e.preventDefault(); //*You should only really prevent default if you use the key event 
    }); 

    $("#arrowRight").click(function() { 
     moveRight(); 

    }); 

    $("#arrowLeft").click(function() { 
     moveLeft(); 
    }); 
});

我的第二個問題是，我需要一種方法來防止滑動功能被調用一次以上，而功能依然動畫。

至於你的第二個問題，我建議你閱讀有關jquery queues。您可以創建自己的隊列來控制來回移動幻燈片（提供除fx以外的任何其他隊列名稱）。一旦當前隊列中的內容完成，您添加隊列的任何左/右步驟將激活。如果您不想串起多個左/右動作，則可以取消該隊列而不殺死可能正在運行的所有其他效果。

來源

2013-06-18 16:29:53 jcbelanger

謝謝，這個鏈接肯定會幫助我理解。 – user2478342

JS/jQuery：重用函數，防止多個函數調用

回答

相關問題