Javascript按钮监听器只触发一次？

Question

我正在制作一个网站幻灯片轮播器。轮播器本身运行良好，但我想用键盘上的左/右箭头键使幻灯片向前/向后滑动。我的代码如下：

$(document).keydown(function(e){
    var currentPosition = 0;
    var slideWidth = 836;
    var slides = $('.slide');
    var numberOfSlides = slides.length;
    var animLength = 600;
    if (e.keyCode == 37) { 
          currentPosition = currentPosition-1;
            // Check to see if new position is unbounded, and wrap accordingly.
            checkForEnds(currentPosition);
            // Move slideInner using margin-left
            $('#slideInner').animate({
              'marginLeft' : slideWidth*(-currentPosition)
            }, animLength, 'easeOutExpo');
            animLength=600;
       return false;
    }
    /*Same code for right button, removed to save space.*/
    function checkForEnds(position){
    // If left is clicked on first slide, wrap to end.
    if(position==-1){currentPosition = numberOfSlides-1, animLength=1000}
    // If right is clicked on last slide, wrap to beginning.
    if(position==numberOfSlides){currentPosition = 0, animLength=1000}
  }
});

我的代码可以正常运行，但只能使用一次。我可以向左旋转一次或向右旋转一次，但在这之后，我不能再次使用同一个按键，直到按下另一个按键为止。我对Javascript输入非常陌生，是否有简单的解决方法？

这是临时网站。现在它很混乱，但我可以很好地处理所有奇怪的排序问题和布局问题。 http://technoheads.org/test/ice/

- Salem

Answer 1

好的，我搞清楚了。

这与你绑定事件无关；事件被正确触发，但用于计算位置的方程式是错误的。

你在块内定义了currentPosition变量；因此，每次触发事件时都会定义它；一旦触发，你将始终获得相同的值。

我解决这个问题的方法是将currentPosition移动到全局空间。

在这里实时检查：http://jsfiddle.net/kuroir/SSd3r/

还请注意，在处理此类问题时使用调试器很重要，我强烈建议您使用Google Chrome。

- MarioRicalde

---

我猜Chrome是JavaScript代码中广泛使用的调试器，对吗？我通常编写Java并使用过调试器。不确定为什么从未想过在JavaScript中使用它。无论如何，这很有道理。我最担心的是不理解自己犯的错误。我明白每次按下按钮时它基本上将currentPosition设置回0。感谢您的帮助。此外，我目前使用Dreamweaver输入我的代码，只是因为我从未使用过其他任何东西。您有替代方案的建议吗？ - Salem

Chrome是我的首选，但几乎每个浏览器都可以使用调试器（例如：Firefox、Safari、Opera）。我建议您使用console.log()输出日志消息以查看代码的工作方式，并使用断点。 - MarioRicalde

关于编辑器；我个人偏好Mac上的TextMate，这完全是个人喜好，你也可以尝试VIM或EMACS甚至Notepad++。 - MarioRicalde

记住当你使用 var 语句时，你定义了一个块级作用域变量; 如果你不使用 var ，则会获取可用的变量（如果有）。 - MarioRicalde

它将在全局范围内创建变量（不好） - Shawn

@MarioRicalde 感谢你几年前的帮助。我又看到了这个问题。现在我作为一名工程师使用vim，如果你有兴趣的话。 - Salem

Answer 2

每次触发“keydown”事件时，无论您在幻灯片中的当前位置如何，都会重新定义“currentPosition”。虽然这不是代码中唯一的问题，但它将导致大量奇怪的行为。首先解决这个问题，然后再从那里开始工作。Shawn是正确的，使用调试器并设置断点。

- Ryan Olds

Answer 3

你知道如何使用调试器吗？在Chrome中按下Ctrl + Shift + J，然后选择“脚本”选项卡。导航到你的代码并设置一堆断点。刷新页面... 然后你就可以实时查看正在发生的事情了。

- Shawn

---

从未想过可以使用元素检查器做到这一点。尽管仍在努力解决问题。步骤 步骤 步骤 - Salem