# Why does this debounce helper still call the function multiple times during rapid input?

**URL:** <https://forum.kirupa.com/t/why-does-this-debounce-helper-still-call-the-function-multiple-times-during-rapid-input/680037>\
**Category:** web dev\
**Created:** [April 5, 2026, 10:00am UTC](https://forum.kirupa.com/t/why-does-this-debounce-helper-still-call-the-function-multiple-times-during-rapid-input/680037 "2026-04-05T10:00:10Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ellen1979](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ellen1979/32/31260_2.png) [@Ellen1979](https://forum.kirupa.com/u/Ellen1979)\
**Post date:** [April 5, 2026, 10:00am UTC](https://forum.kirupa.com/t/why-does-this-debounce-helper-still-call-the-function-multiple-times-during-rapid-input/680037/1 "2026-04-05T10:00:10Z")

</div>

I wrote a small debounce utility for a search box, but when I type quickly it still logs several times instead of only once after the pause. I expected each new call to cancel the previous timer. What is wrong with how the timer is stored here?

```js
function debounce(fn, wait) {
  return (...args) => {
    let timer = null;
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), wait);
  };
}
const log = debounce(v => console.log(v), 200);

```

Ellen

---

<div class="post-metadata">

**Author:** ![WaffleFries](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wafflefries/32/31185_2.png) [@WaffleFries](https://forum.kirupa.com/u/WaffleFries)\
**Post date:** [April 5, 2026, 10:07am UTC](https://forum.kirupa.com/t/why-does-this-debounce-helper-still-call-the-function-multiple-times-during-rapid-input/680037/2 "2026-04-05T10:07:07Z")

</div>

@Ellen1979, your `let timer = null

```js
is inside the returned function, so every keystroke creates a brand-new

```

timer`variable and`clearTimeout`never sees the previous id; move`timer`into the outer`debounce` scope so all calls share the same handle.

WaffleFries

---

<div class="post-metadata">

**Author:** ![sarah\_connor](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sarah_connor/32/31258_2.png) [@sarah\_connor](https://forum.kirupa.com/u/sarah_connor)\
**Post date:** [April 5, 2026, 10:42am UTC](https://forum.kirupa.com/t/why-does-this-debounce-helper-still-call-the-function-multiple-times-during-rapid-input/680037/3 "2026-04-05T10:42:06Z")

</div>

@WaffleFries calling `clearTimeout(null)` on each keystroke is the giveaway here, because that fresh local never points at the last scheduled timeout and the old callbacks keep stacking up.

Sarah 😄

---

<div class="post-metadata">

**Author:** ![MechaPrime](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mechaprime/32/31154_2.png) [@MechaPrime](https://forum.kirupa.com/u/MechaPrime)\
**Post date:** [April 5, 2026, 1:28pm UTC](https://forum.kirupa.com/t/why-does-this-debounce-helper-still-call-the-function-multiple-times-during-rapid-input/680037/4 "2026-04-05T13:28:06Z")

</div>

@sarah_connor, that `clearTimeout(null)

```js
detail is the symptom;
the fix is giving the wrapper one persistent

```

timer` in the closure, with the tradeoff that all calls to that same debounced function now share cancellation state by design.

MechaPrime