Kann dieser Code kürzer umgesetzt werden?

Ich habe den folgenden Code:

let keyWeap = [];
let keyStick = [];
let timeout;
document.querySelectorAll(".imageSearch").forEach(el => {
  el.addEventListener("keydown", (e) => {
    clearTimeout(timeout);

    if (e.keyCode >= 48 && e.keyCode <= 90 || e.keyCode === 8 && keyWeap.length >= 1 || keyStick.length >= 1) {
      if (e.target === document.querySelector(".is1")) {
        if (e.key === "Backspace" && keyWeap.length >= 1) {
          keyWeap.pop();
        }
        else {
          keyWeap.push(e.key);
        }
      }
      else {
        if (e.key === "Backspace" && keyStick.length >= 1) {
          keyStick.pop();
        }
        else {
          keyStick.push(e.key);
        }
      }

      console.log(`${keyWeap} und ${keyStick}`)
    }

    timeout = setTimeout(() => {
      console.log("rest ausführen...")
    }, 500);
  })
});

Zwei Eingabefeldern wird ein Event Listener gegeben, dann wird geprüft ob es keine Sondertasten sind (bis auf Backspace). Dann wird geguckt, ob es sich um den ersten oder den zweiten Input handelt. Dementsprechend wird dann ins richtige Array der Wert, der ins Eingabefeld eingegeben wurde, gepusht und sobald eine halbe Sekunde nicht getippt wird, werden diese Arrays an eine weitere Funktion übergeben (undefiniert, in diesem Fall nur ein console.log()).

Irgendwie habe ich die ganze Zeit das Gefühl, man könnte dieses Ziel besser umsetzen. Trügt das oder gibt es wirklich einen effizienteren Weg?

Answer 1

[regex9]

Bei nur zwei Eingabefeldern könnte man sich die Abfrage im Event Handler, welches Eingabefeld nun vorliegt, auch sparen und stattdessen zwei Event Listener ansetzen. Die Eingabefelder müssten dafür allerdings individuell selektierbar sein (bspw. durch eine Klasse weap und eine Klasse stick).

Die Abfrage bzgl. der Backspace-Taste braucht man nur einmal.

let timeout;

function handleKeyDownEvent(evt, keys) {
  clearTimeout(timeout);

  if (evt.keyCode === 8 && keys.length) {
    keys.pop();
  }
  else if (evt.keyCode >= 48 && evt.keyCode <= 90) {
    keys.push(evt.key);
  }

  timeout = setTimeout(() => {
    /* ... */
  }, 500);
}

const keyWeap = [];
const keyStick = [];
document.querySelector(".weap").addEventListener("keydown", evt => handleKeyDownEvent(evt, keyWeap));
document.querySelector(".stick").addEventListener("keydown", evt => handleKeyDownEvent(evt, keyStick));