如何存储同时按键

Question

当我在 JavaScript 中使用按键事件侦听器时，按键会在重新开始之前“等待”。我认为这是因为按键需要监听特定的按键，但对我来说还没有起作用。

我已经尝试使用不同的教程来解决这个问题的不同观点，但它们都没有为我工作......我想我只需要不使用按键事件侦听器，但我不确定如何使用。我只了解 JavaScript 几个星期，所以我不知道如何使用高级方法。

var key = "";
document.addEventListener('keyup', e => { key = ""; });
document.addEventListener('keydown', e => { key = e.code; });
setInterval(e => {
    document.getElementById('test').innerText = key;
}, Infinity);

<p>Press and hold keys...</p>
<p id="test"></p>

如果你先按A，然后再按D，它会等一会儿才说D已被按下。这是一个问题，因为我试图制作一个可以同时按下多个键的游戏手柄。

Answer 1

使用

Set

（mdn 参考）跟踪当前按下的所有按键。您当前使用单个字符串的方法

key

对于存储多个密钥来说是不切实际的。

const codes = new Set();

const updateDisplay = (mode, evt) => {
  evt.preventDefault();
  if (mode === 'add') codes.add(evt.code);
  if (mode === 'rem') codes.delete(evt.code);
  document.querySelector('.state').textContent = [ ...codes ].join(' + ') || '(no keys)';
}

window.addEventListener('keydown', evt => updateDisplay('add', evt));
window.addEventListener('keyup', evt => updateDisplay('rem', evt));

window.addEventListener('focus', () => document.querySelector('.focus').style.display = 'none');
window.addEventListener('blur', () => document.querySelector('.focus').style.display = '');

<div class="focus">WINDOW IS UNFOCUSED; CANNOT PROCESS KEY EVENTS (please click)</div>
<p>Press and release buttons (potentially many at once)</p>
<p>Current state: <span class="state">(no keys)</span></p>