Question

请原谅我的无知，我最近才开始写javascript。我不是在寻找一个开箱即用的解决方案，而是更多一些能够帮助我自己编写代码的洞察力。

我正在使用全屏滑动面板类型的网站，可选择使用箭头键或可点击链接进行导航。

当使用箭头键导航时，我已经完成了所有功能，我想要做的是在使用屏幕导航链接时调用相同的功能。我不知道如何做到这一点，因为函数和变量是在键绑定函数中声明的。

我的第二个问题是我需要一种方法来防止在功能仍然是动画时多次调用滑动功能。我尝试了各种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();
});

});

Answer 1

在键绑定之外声明你的函数，比如

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

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

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

或者从任何地方打电话。

Answer 2

至于你的第一个问题，你是对的。您希望简化事件处理程序。您需要在事件处理程序之外移动逻辑：

$(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之外的任何其他队列名称）。添加队列的任何左/右步骤将在当前队列完成后激活。如果您不想将多个左/右操作串起来，则可以取消该队列而不会中止可能正在运行的所有其他效果。

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

2 个答案: