jQuery keydown () слишком поспешный - PullRequest
Новая
       6

jQuery keydown () слишком поспешный

0 голосов
/ 23 октября 2011

По сути, у меня всегда есть один видимый элемент, и я использую клавиши со стрелками, чтобы изменить видимость элементов родственного элемента.

Arrow left = Показывает предыдущий элемент видимому, а затем скрывает следующий элемент.

Arrow right = Показывает следующий элемент видимому, а затем скрывает предыдущий элемент.

Проблема в основном: быстрое нажатие клавиш со стрелками.

В моем jsfiddle текущим видимым является 4, и если я быстро нажму Arrow right и Arrow left, я получу номер 3, где, как будто вы делаете это медленно (ожидая, что все анимации заканчиваются), вы в конечном итоге получаете номер 4, как вы должны.

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

Я хочу, чтобы можно было нажимать клавиши со стрелками так быстро, как это возможно, и в конечном итоге показывать правильный номер.

.. и это странно, если вы сначала нажимаете влево, а затем вправо несколько раз, и в итоге вы видите все цифры ... что также не нужно.

Ответы [ 3 ]

2 голосов
/ 23 октября 2011

Это, конечно, не самое чистое решение, но первое, что пришло в голову, - это отслеживать выбранный элемент в переменной: 

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

Вот рабочий пример .Обратите внимание, что это решение зацикливается, когда вы достигаете начала / конца и пытаетесь продолжить в том же направлении.Я не знаю, если это то, что вы после, но это будет легко изменить.

1 голос
/ 23 октября 2011

Кажется, самое простое решение - использовать селектор :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 demo .

Отредактировано , чтобы привести в порядок вышеприведенный код, чтобы уменьшить вложенность 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 .

Ссылки:

1 голос
/ 23 октября 2011

Используйте что-то отличное от :visible, чтобы отметить текущий элемент, так как :visible будет соответствовать для элементов, которые спрятаны ing , но еще не спрятаны en . Демонстрация с использованием класса здесь .

...