перехватите несколько «onkeydown» и дождитесь, пока «onkeyup» выполнится - PullRequest
Новая
       11

перехватите несколько «onkeydown» и дождитесь, пока «onkeyup» выполнится

2 голосов
/ 13 февраля 2009

В своем веб-приложении я использую событие onkeydown для захвата нажатий клавиш.

Например, я фиксирую клавишу 'j', чтобы анимировать прокрутку вниз по странице (и тем временем занимаюсь другими делами).

Моя проблема в том, что пользователь может удерживать клавишу «j» нажатой, чтобы прокрутить страницу вниз (это эквивалентно быстрым многократным нажатиям клавиш).

В моем приложении это приводит к серии анимаций, которые выглядят не очень хорошо.

Как я могу узнать, когда ключ был выпущен, и узнать количество нажатий клавиш, которые я должен был захватить? Таким образом, я мог запустить одну длинную анимацию вместо нескольких коротких.

Ответы [ 4 ]

2 голосов
/ 13 февраля 2009

Опираясь на @ JMD : 

var animate = false;

function startanimation()
{
  animate = true;
  runanimation();
}

function stopanimation()
{
  animate = false;
}

function runanimation()
{
  if ( animation_over )
  {
    if ( !animate )
    {
      return;
    }

    return startanimation();
  }

  // animation code

  var timeout = 25;
  setTimeout(function(){runanimation();},timeout);
}

document.onkeydown = startanimation;
document.onkeyup   = stopanimation;

Однако вам нужно добавить несколько проверок для начала / окончания анимации.

Редактировать: добавил return в JS; повторял бы бесконечно.

1 голос
/ 13 февраля 2009

вы можете попробовать использовать мой плагин отклика см .: http://notetodogself.blogspot.com/2008/12/jquery-responsiveness-plugin-for-fast.html

см. Демо здесь: http://doesthatevencompile.com/current-projects/jquery.responsiveness/

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

1 голос
/ 13 февраля 2009

setTimeout возвращает идентификатор таймера. Итак, что бы я сделал, после того, как вы получите событие keyDown, я бы запустил таймер с очень коротким периодом ожидания, например так: 

var globalTimerId = -1;
var keyDownCount = 0;

function handleKeyDown(e) {
    if (globalTimerId != -1) {
        clearTimeout(globalTimerId);
        keyDownCount++;
    }

    /* 500 means 1/2 a second, adjust for your needs */
    globalTimerId = setTimeout(handleKeyDownAfterWait, 500);
    keyDownCount = 1;
}

function handleKeyDownAfterWait() {
    globalTimerId = -1;
    /* keyDownCount will have the number of times handleKeyDown was called */
}

Таким образом, идея заключается в том, что каждый раз, когда получено событие keyDown, таймер очищается (при условии, что он еще не истек) и перезапускается. Если таймер истекает, пользователь отпустил ключ, и вы можете справиться с этим в handleKeyDownAfterWait.

Однако могут быть и другие более элегантные решения с jQuery или другой библиотекой JS. Это просто что-то быстрое и грязное (и, возможно, глючное;))

1 голос
/ 13 февраля 2009

Вместо того, чтобы пытаться складывать анимации, вы можете запустить анимацию на keyDown, и если в конце анимации вы еще не получили keyUp, тогда запустите другую анимацию. Как только вы достигнете конца анимации и у вас do есть keyUp, тогда все готово.

...