javascript - capture multiple "onkeydown" and wait until "onkeyup" to execute - Stack Overfl

admin管理员组

文章数量:1431426

In my web app, I use the onkeydown event to capture key strokes.

For example, I capture the 'j' key to animate a scroll down the page (and do some other stuff meanwhile).

My problem is the user might keep the 'j' key down to scroll further down the page (this is equivalent to fast multiple key strokes).

In my app, this result in a series of animations that doesn't look that good.

How can I know when the key has been released, and know the amount of key stokes I should have captured? This way I could run one long animation instead of multiple short ones.

In my web app, I use the onkeydown event to capture key strokes.

For example, I capture the 'j' key to animate a scroll down the page (and do some other stuff meanwhile).

My problem is the user might keep the 'j' key down to scroll further down the page (this is equivalent to fast multiple key strokes).

In my app, this result in a series of animations that doesn't look that good.

How can I know when the key has been released, and know the amount of key stokes I should have captured? This way I could run one long animation instead of multiple short ones.

• javascript
• events
• keyboard

Share Improve this question Follow asked Feb 12, 2009 at 22:49 yoavfyoavf 21.3k99 gold badges3838 silver badges3838 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Building on @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;

You'll need to add some checks for starting/ending animations, however.

Edit: added a return to the JS; would've recursed endlessly.

Rather than trying to stack up the animations, you could start an animation on keyDown, and if at the end of the animation you haven't yet received keyUp then start another animation. As soon as you reach the end of an animation and you do have keyUp then you're done.

setTimeout returns a timer ID. So what I would do is after you receive a keyDown event, I would start a timer with a very short wait period, like so:

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 */
}

So the idea is that each time a keyDown event is received, the timer is cleared (assuming it hasn't elapsed yet) and restarted. If the timer expires, the user has let go of the key and you can handle that in handleKeyDownAfterWait.

There may be other more elegant solutions with jQuery or another JS library however. This is just something quick and dirty (and possibly buggy ;))

you can try using my repsonsiveness plugin see: http://notetodogself.blogspot./2008/12/jquery-responsiveness-plugin-for-fast.html

see the demo here: http://doesthatevenpile./current-projects/jquery.responsiveness/

the one where you type stuff fast. you can adapt that to your needs. like so: the animation event will be bound with the plugin, and execute when the user stops doing something fast. you can count how many times he does the fast thing by normal binding of the event.

本文标签： javascriptcapture multiple quotonkeydownquot and wait until quotonkeyupquot to executeStack Overflow