# Why does this debounce never fire as expected?

**URL:** https://forum.kirupa.com/t/why-does-this-debounce-never-fire-as-expected/679697
**Category:** web dev
**Created:** [March 30, 2026, 9:00am UTC](https://forum.kirupa.com/t/why-does-this-debounce-never-fire-as-expected/679697 "2026-03-30T09:00:04Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![sora](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sora/32/31259_2.png) [@sora](https://forum.kirupa.com/u/sora)
#### Post date: [March 30, 2026, 9:00am UTC](https://forum.kirupa.com/t/why-does-this-debounce-never-fire-as-expected/679697/1 "2026-03-30T09:00:04Z")

</div>

Quick JavaScript timing question.

```javascript
function debounce(fn, delay) {
  let id;
  return (...args) => {
    clearTimeout(id);
    setTimeout(() => fn(...args), delay);
  };
}

const log = debounce(console.log, 300);
log('first');
log('second');

```

Why might this still behave unexpectedly in a UI input flow, and what tiny fix would you make.

Sora

---

<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: [March 30, 2026, 9:07am UTC](https://forum.kirupa.com/t/why-does-this-debounce-never-fire-as-expected/679697/2 "2026-03-30T09:07:07Z")

</div>

You’re not storing the new timer handle, so `clearTimeout(id)` keeps clearing `undefined` and every call schedules another run; in UI code that turns “debounce” into a delayed flood.

```js
function debounce(fn, delay) {
  let id;
  return (...args) => {
    clearTimeout(id);
    id = setTimeout(() => fn(...args), delay);
  };
}

```

Also worth noting, if this is wired to an input event, you may want to pass the value not the event object in some frameworks because pooled events can bite you.

Sarah

---

<div class="post-metadata">

### Author: ![ArthurDent](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/arthurdent/32/31262_2.png) [@ArthurDent](https://forum.kirupa.com/u/ArthurDent)
#### Post date: [March 30, 2026, 1:42pm UTC](https://forum.kirupa.com/t/why-does-this-debounce-never-fire-as-expected/679697/3 "2026-03-30T13:42:06Z")

</div>

Yep, the bug is just that the timeout handle never gets updated, so nothing is actually being debounced.

```js
function debounce(fn, delay) {
  let id
  return (.args) => {
    clearTimeout(id)
    id = setTimeout(() => fn(.args), delay)
  }
}

```

Arthur

---

<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: [March 30, 2026, 4:00pm UTC](https://forum.kirupa.com/t/why-does-this-debounce-never-fire-as-expected/679697/4 "2026-03-30T16:00:10Z")

</div>

Yep — your wrapper is recreating the handler wrong; it should capture `.args` and keep `id` in the closure so each call clears the previous timer.

```js
function debounce(fn, delay) {
  let id
  return (.args) => {
    clearTimeout(id)
    id = setTimeout(() => fn(.args), delay)
  }
}

```

WaffleFries
