jQuery keydown() 太仓促了

Question

本质上，我始终有一个可见元素，并且我使用箭头键来更改同级元素的可见性。

向左箭头 = 显示上一个元素到可见元素，然后隐藏下一个元素。

向右箭头 = 显示可见元素的下一个元素，然后隐藏上一个元素。

问题基本上是：快速按箭头键。

在我的jsfiddle中，当前可见的是4，如果我快速按向右箭头和向左箭头 我最终得到了数字 3，就好像你慢慢地做（等待所有动画完成）一样，你最终得到了数字 4，就像你应该的那样。

http://jsfiddle.net/lollero/je2fZ/

我想要的是能够按尽可能快地按下箭头键并最终显示正确的数字。

..如果你先按左键，然后再按右键多次，最终会显示所有数字，这很奇怪......这也是不希望的。

Answer 1

这当然不会是最干净的解决方案，但首先想到的是跟踪变量中选定的元素：

$('p:nth-child(4)').show();
var current = 3;
$(document).keydown(function(e){
    if (e.keyCode == 37) {
        $("p").stop(true, true).hide(500);
        current = (current - 1 < 0) ? $("p").length - 1 : current - 1;
        $("p").eq(current).stop(true, true).show(500);
    }
    else if (e.keyCode == 39) { 
        $("p").stop(true, true).hide(500);   
        current = (current + 1 == $("p").length) ? 0 : current + 1;      
        $("p").eq(current).stop(true, true).show(500);
     }
});

这是一个 工作示例。请注意，一旦到达起点/终点，该解决方案就会循环，并尝试沿同一方向继续。我不知道这是否是你想要的，但修改起来很容易。

Answer 2

使用 :visible 以外的内容来标记当前元素，因为 :visible 将匹配正在隐藏但尚未隐藏的元素en。 使用类进行演示此处。

Answer 3

我认为最简单的解决方案似乎是使用 :animated 选择器来检查是否存在动画元素，如果存在，则返回 false。或者，更确切地说，要测试是否有没有正在处理动画，并且只有在没有当前动画时，才对元素进行动画处理：

$('p:nth-child(4)').show();

$(document).keydown(function(e) {
    if (e.keyCode == 37) {
        if (!$('p:animated').length){
            $('p:visible').prev().stop(true, true).show(500).next().stop(true, true).hide(500);
        }
        return false;
    }
    else if (e.keyCode == 39) {
        if (!$('p:animated').length){
            $('p:visible').next().stop(true, true).show(500).prev().stop(true, true).hide(500);
        }
        return false;
    }
});

JS Fiddle 演示。

---

Edited to tidy up the above code, to reduce the nested if:

$('p:nth-child(4)').show();

$(document).keydown(function(e) {
    if (e.keyCode == 37 &&!$('p:animated').length){
        $('p:visible').prev().stop(true, true).show(500).next().stop(true, true).hide(500);
        return false;
    }
    else if (e.keyCode == 39 && !$('p:animated').length){
        $('p:visible').next().stop(true, true).show(500).prev().stop(true, true).hide(500);
        return false;
    }
});

JS Fiddle 演示。

参考文献：

• :animated 选择器。