Entprellen Sie eine Funktion mit einer dynamischen, verzögerungsbasierten Eingabe ⇐ JavaScript

[Guest]

Ich möchte eine Funktion in JavaScript mit einer dynamischen Verzögerung basierend auf der Benutzereingabe entprellen. Diese Verzögerung basiert auf der Länge der Eingabezeichenfolge. Je länger die Eingabe, desto länger die Verzögerung.
Mit meinem Code wird die Methode mehrmals ausgelöst oder ist zu stark verzögert:

Code: Select all

let debounceTimeout;

function dynamicDebounce(fn, input) {
const delay = Math.min(500 + input.length * 20, 2000);
clearTimeout(debounceTimeout);

debounceTimeout = setTimeout(() => {
fn(input);
}, delay);
}

function handleInputChange(input) {
console.log("User input:", input);
}
document.querySelector('input').addEventListener('input', function(event) {
dynamicDebounce(handleInputChange, event.target.value);
});

Wie kann ich das Problem beheben?