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

});

答

声明之外的功能键绑定，就像

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

然后从您的keydown函数调用这个函数外

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

或从任何你想要的地方调用它。

+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以外的任何其他队列名称）。一旦当前队列中的内容完成，您添加队列的任何左/右步骤将激活。如果您不想串起多个左/右动作，则可以取消该队列而不杀死可能正在运行的所有其他效果。

谢谢，这个链接肯定会帮助我理解。 – user2478342

JS/jQuery：重用函数，防止多个函数调用

相关推荐