Debouncing vs Throttling: Handling Expensive Function Calls in JavaScript

hmm, well that's a good question

let's see, does a new timer get created each time? Yes, setTimeout creates a new timer every time the debounced function is called. But here's the important part:

timer is not re-declared on every call.

It persists because it's stored in a closure—defined in the outer function (debounce) but used in the returned inner function.

This means that:

Only one timer variable exists per debounced function and every call to the returned function clears the existing timer using clearTimeout(timer) before setting a new one.

That’s what ensures only the last call results in fn being executed—after the delay.

Why this works:

JavaScript functions have closures, so when the inner function (the one you attach to the event listener) uses timer, it’s always referring to the same variable in memory, not a new one each time.

---

Now if we had declared let timer inside the returned function like this:

return function (...args) { let timer = setTimeout(() => fn.apply(this, args), delay); };

Then a new timer variable would be created each time, and clearTimeout(timer) would have no effect—because it would only cancel the newly-created timer, not the previous ones.

That would break the debounce logic.

---

Also, why didn't we declare timer even outside the whole debounce function?

Well, that's cause we want to have encapsulation, basically we want to ensure that debounce function can maintain an independent behaviour

Using global variables is usually also discouraged cause you might mistakenly redeclare it down the line and cause bugs

So yeah, basically for the sake of maintaining independent behaviour and avoiding potential bugs.