I am trying to create a simple debounce for text input. Following is the code:
<body>
<input id="myInput" type="text" />
</body>
<script>
function save(data) {
console.log('saved!!', myInput.value);
}
//function process(e, callback, delay) { signature is changed like this, when we call onKeyUp
function process(callback, delay) { //signature is changed to this, when we call 'process' directly
//console.log('e', e, 'callback', callback, 'delay', delay);
let timer;
return function () {
clearTimeout(timer);
timer = setTimeout(callback, delay);
}
}
function onKeyUp(e) {
//console.log('onKeyUp')
process(e, save, 1000)
}
//const inp = document.querySelector("#txtInput");
const inp = document.getElementById("myInput");
inp.addEventListener(
'keyup',
//process(save, 1000) //works
onKeyUp //-- > does not work
);
</script>
If I simply call process
function on keyup event, it works as expected.
However, I also want to pass e.target.value, and hence I want to event object as well. Hence, to achieve that when I tried calling another function called onKeyUp
, which captures event object and when I pass it to process(e, save, 1000)
the setTimeout isn't getting called and hence save function isn't getting triggered.
My question is what is the difference when we call process
funtion directly on event listener and when we call another function and pass event object to it.