HTML Canvas: Controlling keydown registry when key is held down

Question

I'm looking for a way to control how many keydown events are registered in a given period of time when a key is held down. I have two animation functions, collapse() and expand() which collapse and expand a box when the down key is pressed. I've got it rigged so that the second animation is kicked off after the first. However, I have a timer, hovering(t) set within the first animation that is reset with every keypress so that the second animation doesn't begin until the key is released and the timer expires.

    function collapse(){

        if(h > 1 && arrayCount < myArray.length){
          reqAnimFrame(collapse);
          h -= 10;
          clear();
          draw();
        } else {
          arrayCount += 1;
          h = 0;
          clearHoverTimer();
          hovering(250); 
        }
    }

    function expand(){

        if(h < 100){
          reqAnimFrame(expand);
          h += 10;
          clear();
          draw();
        } else {
          h = 100;
          clear();
          draw();
        }
    }

Here's where my problem is: the first animation function also cycles through an array of strings via the arrayCount variable. When collapse() fires, the arrayCount increments by one. Unfortunately, when the key is held down, it fires off the collapse function in quick succession and the array is cycled through way too quickly.

Is it possible to restrict the key event timing so that say half the keys are registered?

I tried setting a variable heldDown to false , which would allow the keyEvent to register. The keyEvent would call collapse and start heldDownTimer . Once heldDownTimer expires, heldDown would be reset to false and the cycle would start over.

Answer 1

Set flags indicating the current state of your collapsing & expanding animation.

var doCollapsing indicates if the collapsing code should animate.

var doExpanding indicates if the expanding code should animate.

In your keydown handler, you can ignore 'extra' keydown by only setting the flags when they indicate the animation loop is idle.

    // listen for keydown and doCollapsing only if the animation is currently idle
    if(!doCollapsing && !doExpanding){
        doCollapsing=true;  // start collapsing
        doExpanding=false;  // don't expand until a keyup fires
    }

This will cause collapse+expand to execute once instead of being triggered with every keydown.

// variables indicating the state of the animation
var doCollapsing=false;
var doExpanding=false;


// listen for keydown events
document.addEventListener("keydown",handleKeydown,false);


// listen for keyup events
document.addEventListener("keyup",handleKeyup,false);


// start the animation loop
requestAnimationFrame(animate);


// handle keydown events
function handleKeydown(e){

    // listen for keydown
    // doCollapsing only if the animation is idle
    if(!doCollapsing && !doExpanding){
        doCollapsing=true;
        doExpanding=false;
    }

}


// handle keyup events
function handleKeyup(e){
    doExpanding=true;
}


// the animation loop
function animate(time){
    requestAnimationFrame(animate);

    if(doCollapsing){
        // Do collapsing until done
        // When done: doCollapsing=false;
    }else if(doExpanding && hoveringTimerHasExpired){
        // Do expanding until done
        // When done: doExpanding=false;
    }

}