HTML画布:当键被按下时控制keydown注册表

HTML Canvas: Controlling keydown registry when key is held down

本文关键字：控制 keydown 注册表 画布 HTML      更新时间：2023-09-26

我正在寻找一种方法来控制在按住某个键的给定时间段内注册了多少keydown事件。我有两个动画功能，collapse()和expand()，当按下向下键时，它们会折叠和展开一个框。我把它装好了，这样第二个动画就在第一个动画之后开始了。但是，我在第一个动画中设置了一个计时器hovering(t)，每次按键都会重置该计时器，这样第二个动画在释放关键帧且计时器到期之前不会开始。

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

这就是我的问题所在：第一个动画函数也通过arrayCount变量在字符串数组中循环。当collapse（）激发时，arrayCount将递增一。不幸的是，当按下键时，它会快速连续地触发塌陷功能，数组循环过快。

是否可以限制密钥事件的时间，以便注册一半的密钥？

我尝试将变量heldDown设置为false，这将允许注册keyEvent。keyEvent将调用collapse并启动heldDownTimer。一旦heldDownTimer到期，heldDown将被重置为false，并且循环将重新开始。

设置指示折叠&展开动画。

var doCollapsing指示折叠代码是否应设置动画。

var doExpanding指示展开代码是否应设置动画。

在keydown处理程序中，可以忽略"extra"keydown，方法是仅在标志指示动画循环空闲时设置标志。

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

这将导致collapse+expand执行一次，而不是每次按下键都触发。

// 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;
    }
}
相关文章：