JavaScript的反跳：如何获取e.target？

Question

I'm using the implementation of debounce from https://davidwalsh.name/javascript-debounce-function .

The question now is: How do I get the event (e.target) from the eventlistener and use it inside the debounced function?

This is what I've come up with:

document.querySelector('textarea')
  .addEventListener('input', (e) => {
     debounce(
         () => { console.log('debounce at '+e.target.value); },
         1000,
         false
     )(e); // add (e) so that the function debounce returns gets called inside the anonymous function
  });

The problem is that it triggers immediately (and the debounce effect gets effectively killed).

Answer 1

you need to wrap the input event handler, like so:

function handler(e) {
  console.log('debounce at '+e.target.value); 
}
const debouncedHandler = debounce(handler, 1000)
document.querySelector('textarea').addEventListener('input',debouncedHandler, false)

now when the event fires it will call the same handler and not a new one

demo