Question

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.

Answer 1

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.