javascript - 查询/JavaScript : Run one function when key combination is held down and another function if keys are released

Question

我想要一些代码来完成需要用户记住数字的任务。该任务应按如下方式工作:

用户被引导按下三个键的组合以显示他们需要记住的数字。这些可以是任何三个键，只要它需要用户使用双手(想法是这将防止他们写下他们应该记住的数字)。

当他们开始按住按键时，会显示数字并启动计时器。如果他们在必要的时间段(15 秒)内持续按住按键，一个功能会自动运行(这是他们在记住数字时必须完成的另一项任务)。

但是，如果他们在 15 秒结束前松开按键，则会运行不同的功能。这个函数只是通知他们他们过早地释放了按键，当他们点击一个按钮时，任务会以一个新的数字重新开始。

我目前的代码如下所示:

var mapDown = {}; // Global object to store keydown events
var mapUp = {}; // Global object to store keyup events

此函数使用函数 numberFunc()(未显示)生成要存储的随机数并运行页面。

function keyDownFunc() {
  mapDown = {};
  mapUp = {};
  memoryNum = numberFunc(); 
  $('#experimentDisplay').load('./html/numberTest.html');
  $('#experimentDisplay').show();
}

下面的函数在上面调用的页面的脚本中。它显示要存储在名为“numberTestDiv”的 div 中的数字。目前(为简单起见)，它被设置为在按住“p”和“q”键时运行。

<script>
onkeydown = onkeyup = function(e){
    e = e || event; // to deal with IE
    mapDown[e.keyCode] = e.type == 'keydown';
    mapUp[e.keyCode] = e.type == 'keyup';

    if(mapDown[80] && mapDown[81]) {
       $("#numberTestDiv").html(memoryNum);
       timer = setTimeout(runTrial, 15000);
     }; // run the function runTrial() if the keys are held down for the requisite period

     if (mapUp[80] || mapUp[81]) {
       mapDown = {};
       clearTimeout(timer);
       keyUpFunc(); // stop the timer and run the function keyUpFunc() if either of the keys are released too early
     }

}
</script>

如果用户过早释放按键，则调用函数 keyUpFunc。这将清除 mapDown 和 mapUp 对象以及计时器，并将用户带到他们可以单击以再次启动该过程的页面。

function keyUpFunc() {
  mapDown = {};
  mapUp = {};
  clearTimeout(timer);
  $('#experimentDisplay').load('./html/keyUp.html');
  $('#experimentDisplay').show();
}

上面有几个问题。

1) 如果用户按住按键并继续执行主任务，屏幕会闪烁相当长的一段时间 - 我假设是由于扩展按键所产生的所有事件。我不知道如何避免这种情况。我读过修改键自动重复

2) clearTimeout() 函数似乎不起作用。如果用户提前释放按键，被定向到 keyUpFunc 函数，然后再次启动 keyDownFunc 函数，他们不必按住“p”和“q”键 15 秒(或根本不需要)继续runTrial 函数。

引用的其他答案包括: JavaScript multiple keys pressed at once Get a list of all currently pressed keys in Javascript Run code after some time has passed or a condition is met

Answer 1

添加一个标志来存储按住两个按钮的代码是否已经在运行，然后将其用作运行代码的条件应该可以解决您的问题。当您按住按钮或抬起按钮时，这基本上只会阻止代码运行数百次。下面是一些示例代码:

var going = 0;
onkeydown = onkeyup = function(e){    
 e = e || event; // to deal with IE
 mapDown[e.keyCode] = e.type == 'keydown';
 mapUp[e.keyCode] = e.type == 'keyup';
  if(going==0){
    if(mapDown[80] && mapDown[81]) {
       going = 1;
       timer = setTimeout(runTrial, 15000);
     }; // run the function runTrial() if the keys are held down for the requisite period
  } else if(going==1){
     if (mapUp[80] || mapUp[81]) {
      going = 0;
      clearTimeout(timer);
      keyUpFunc(); // stop the timer and run the function keyUpFunc() if either of the keys are released too early
     }
  }
}

runTrial = function(){
 going = 0; //This just resets the going value for the next trial. It may not be necessary if you just store going as a local variable and reset it at the start each time. 
 console.log("all done"); // replace this with the correct function.
}