Wieso werden die Werte im array nicht richtig aktualisiert?
Ich hab den folgenden code:
let genCmd = ["1 37", "1", "0.01", "0 0", "0 0", "0 0", "0 0"];
document.querySelectorAll(".stickerFloats").forEach(e => {
e.addEventListener("keyup", e => {
let val = genCmd[3 + parseInt(e.target.classList[1].replace("s", ""))].split(" ")[0];
let aVal = e.target.value.replace(",", ".");
let updateCmd = genCmd;
if (aVal.length <= 4 && aVal !== "" && /\d/.test(aVal) && /^(0(\.\d+)?|1(\.0+)?)$/.test(aVal)) {
genCmd[3 + parseInt(e.target.classList[1].replace("s", ""))] = `${val} ${aVal}`
} else {
genCmd[3 + parseInt(e.target.classList[1].replace("s", ""))] = `${val} 0`
}
document.querySelector("#code").querySelector("p").innerText = `!gen ${updateCmd.toString().replaceAll(",", " ")}`;
})
})
Dieser Code hat das Array (genCmd) und greift darauf zu. Dazu gibt es vier inputs mit der Klasse .stickerFloats die alle die Werte an verschiedenen Stellen im Array ändern sollen. Das funktioniert auch außer man wechselt zu schnell zwischen diesen Inputs; dann wird nur ein Teil der Werte geupdated und die Inputs von denen zu schnell wieder weg gewechselt wurde werden ignoriert - wieso?
1 Antwort
Es scheint, dass das Problem von der Art und Weise herrührt, wie das Event-Modell von JavaScript funktioniert. JavaScript ist single-threaded, das heißt, es kann immer nur eine Aufgabe zur selben Zeit erledigen. Wenn Sie das keyup-Event auslösen und dann schnell zu einem anderen Eingabefeld wechseln, bevor das keyup-Event beendet wurde, kann es passieren, dass das erste Event nicht vollständig abgeschlossen wurde, bevor das zweite Event beginnt.
Ein weiterer Punkt ist, dass das keyup-Event ausgelöst wird, wenn der Benutzer eine Taste loslässt. Wenn der Benutzer also zu schnell zwischen den Eingabefeldern wechselt, könnte das Event für das erste Feld möglicherweise erst ausgelöst werden, nachdem der Fokus bereits auf das zweite Feld verschoben wurde. Das könnte erklären, warum einige Änderungen ignoriert werden.
Eine mögliche Lösung könnte sein, anstelle des keyup-Events das change-Event oder das input-Event zu verwenden. Das change-Event wird ausgelöst, wenn der Benutzer die Eingabe abgeschlossen hat (z.B. wenn das Eingabefeld den Fokus verliert), und das input-Event wird jedes Mal ausgelöst, wenn der Wert des Eingabefelds geändert wird. Das könnte helfen, sicherzustellen, dass alle Änderungen korrekt erfasst werden, auch wenn der Benutzer schnell zwischen den Eingabefeldern wechselt.
Beachten Sie jedoch, dass das Verhalten des change-Events von der Art des Eingabefelds abhängen kann und dass das input-Event in einigen älteren Browsern nicht unterstützt wird. Sie sollten also testen, ob diese Lösung in Ihrem speziellen Anwendungsfall funktioniert.
Die Verwendung des input-Events könnte etwa so aussehen:
```javascript
e.addEventListener("input", e => {
// Ihr Code hier
})
```
Hoffentlich hilft das bei der Lösung Ihres Problems. Wenn nicht, könnte es hilfreich sein, das genaue Verhalten und die genauen Anforderungen Ihrer Anwendung noch genauer zu betrachten, um die beste Lösung zu finden.
