How debounce function return the function in Javascript

Question

I have this debounce function:

const selectElement = document.querySelector('input');

const debounce = (cb, time = 1000) => {
  let timer;

  return (...args) => {
    console.log('run inner function')
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => cb(...args), time)
  }
}

const onChange = debounce((e) => {
  console.log('event', e.target.value)
})
selectElement.addEventListener('input', onChange);

<input input={onChange}/>

The code works ok, but I want to understand, how the returned function is triggered inside debounce function, because I know that if a function returns another function I need to call it like this: debounce()() to trigger the second one, but in our case we trigger the function only once debounce() in addEventListener, but how the second call happens?

You call `debounce(...)` once to create `onChange`. Then the event listener calls `onChange()` upon `input`. — deceze, Dec 02 '22 at 16:09
Does this answer your question? [What is the "debounce" function in JavaScript?](https://stackoverflow.com/questions/24004791/what-is-the-debounce-function-in-javascript) — Metro Smurf, Dec 02 '22 at 16:09
Even though it’s basically the same thing and will not cause an error, you should try to use setTimeout with clearTimeout and setInterval with clearInterval so people who look at your code are not confused. — James, Dec 02 '22 at 16:21
@James, fixed, it was it was't intentionally. Thanks for feedback — Asking, Dec 02 '22 at 18:47

Wyck · Accepted Answer · 2022-12-02T16:32:38.953

Maybe it would help to first acknowledge that:

debounce()();

can be rewritten as

let onChange = debounce();
onChange();

And you've passed onChange to addEventListener here:

selectElement.addEventListener('input', onChange);

The internals of the event listener mechanism will remember the onChange you passed in and will call onChange() when the input event occurs.

Imagine an implementation of function addEventListener(type, listener) {} that arranges for listener() to happen when the event occurs.

This is done to defer the function call. The first part (debounce()) creates a function immediately (synchronously). But the call to the function that debounce() returned is deferred until the event occurs.

score 3 · Answer 2 · answered Dec 02 '22 at 16:10

You only would call it like debounce()() if you want to immediately call the function it returns (and throw away the entire point, since with that method you could only call it once).

It returns a function, which here you've named onChange. onChange is called when the selectElement has a input event. You don't say selectElement.addEventListener(('input', onChange()) (emphasis on onChange()) because that would just call onChange once (immediately, not even on the first input event) and attempt to run a function returned from onChange, but it doesn't

How debounce function return the function in Javascript

2 Answers2