javascript - "Glitches"当使用 onkeydown 和多个按键时

Question

按住单个箭头键时，该功能可以正常工作。

但是，当我按住第二个箭头键并释放第二个键时，就会出现问题，不再检测到第一个按住的键。

我的函数的简化版本如下:

document.body.onkeyup = function(e){  
  if ([37,38,39,40].indexOf(e.keyCode) > -1){
    var key_pressed = e.keyCode || e.which;
    console.log(key_pressed + " is UP")
  }

  if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
    e.preventDefault();
  }
};


document.body.onkeydown = function(e){  
  if ([37,38,39,40].indexOf(e.keyCode) > -1){
    var key_pressed = e.keyCode || e.which;
    console.log(key_pressed + " is DOWN")
  }

  if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
    e.preventDefault();
  }

};

因此，如果我按住向上箭头键，当我按住该键时，它会重复显示38 is DOWN。
然后，如果我按向右箭头键，当我按住两个键时，它会重复显示39 is DOWN。
然后，如果我放开右箭头键，它会显示 39 is UP。

我的期望是它会继续重复说38 is DOWN，因为我仍然按住向上箭头。但它并没有这样做。

为什么会发生这种情况？我应该如何解决此问题，以便仍检测到我的箭头键被按住？

Answer 1

为每个箭头键初始化一个间隔计时器，该计时器在按下箭头键时运行。

在释放每个箭头时清除其间隔计时器:

var timer = [];
    
document.body.onkeyup = function(e){  
  let key = e.keyCode || e.which;
  if ([37,38,39,40].includes(key)) {
    console.log(key + " is UP");
    clearTimeout(timer[key]);      // stop this key's timer
    timer[key] = null;             // clear it so it can be initialized again
  }

  if ([32, 37, 38, 39, 40].includes(e.keyCode)) {
    e.preventDefault();
  }
};

document.body.onkeydown = function(e) {
  let key = e.keyCode || e.which;
  if ([37,38,39,40].includes(key) && !timer[key]) {
    clearTimeout(timer[key]);
    timer[key] = setInterval(() => {  // create a timer for this key
      console.log(key + " is DOWN")
    }, 100);
  }

  if ([32, 37, 38, 39, 40].includes(key)) {
    e.preventDefault();
  }
};