Am trying to implement custom debounce function which must alert whatever data user has typed in a textbox after one second delay (After user has stopped typing). What am I doing wrong? It triggers the alert() immediately with single character.
function debounce(func, timeout) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, timeout);
};
}
function saveInput(args) {
alert(args); //This triggers immediately
}
const processChange = (event) => {
debounce(saveInput(event.target.value), 1000);
}<input type="text" onkeyup="processChange(event)" />Can you guys suggest if I miss anything here?
This has worked for me. However myInput is a global variable here.
function debounce(callback, delay) {
let timeout;
return function () {
clearTimeout(timeout);
timeout = setTimeout(callback, delay);
}
}
const myInput = document.getElementById("myInput");
function helloInput() {
alert(myInput.value);
}
myInput.addEventListener(
"keyup",
debounce(helloInput, 1000)
);
myInput.focus();<input type="text" id="myInput" />