Estoy tratando de crear un rebote simple para la entrada de texto. El siguiente es el código:
<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> Si simplemente llamo a la función de process en el evento keyup, funciona como se esperaba.
Sin embargo, también quiero pasar e.target.value y, por lo tanto, también quiero un objeto de evento. Por lo tanto, para lograr eso cuando traté de llamar a otra función llamada onKeyUp , que captura el objeto del evento y cuando lo paso a process(e, save, 1000) no se llama a setTimeout y, por lo tanto, no se activa la función de guardar.
Mi pregunta es cuál es la diferencia cuando llamamos a la función de process directamente en el detector de eventos y cuando llamamos a otra función y le pasamos el objeto de evento.
El process(save, 1000) funciona porque devuelve una función (la función anónima devuelta en process() ) que pasa a inp.addEventListener como segundo parámetro
inp.addEventListener( 'keyup', process(save, 1000) ); // equals to const callback = process(save, 1000); //get the anonymous function returned in `process()` inp.addEventListener( 'keyup', callback ); //callback will be called like callback() when keyup pero cuando lo cambie a onKeyup , no se llamará a la función anónima, por lo que setTimeout no funcionará, al igual que la función de save
inp.addEventListener( 'keyup', onKeyup ); // onKeyup will be called like onKeyup() function onKeyUp(e) { process(e, save, 1000) // process called } function process(e, callback, delay) { let timer; return function () { // not called, it returns as a function only clearTimeout(timer); timer = setTimeout(callback, delay); } }Arreglarlo. tu puedes hacer
function onKeyUp(e) { process(e, save, 1000)(); } let timer; //assign the `timer` as a global variable function process(e, callback, delay) { return function () { clearTimeout(timer); timer = setTimeout(callback, delay); } } Más aún, no necesita onKeyup si solo desea obtener el parámetro del event . En el primer código, se llamó a la función anónima cuando se activó el teclado, ya aceptó el parámetro del evento.
function process(callback, delay) { let timer; return function (e) { // you can get `e` here clearTimeout(timer); timer = setTimeout(callback, delay); } }