# Coding Challenge - #18: Debounce Function Calls

**URL:** <https://forum.kirupa.com/t/coding-challenge-18-debounce-function-calls/683359>\
**Category:** web dev\
**Created:** [September 12, 2026, 10:00pm UTC](https://forum.kirupa.com/t/coding-challenge-18-debounce-function-calls/683359 "2026-09-12T22:00:06Z")\
**Posts on this page:** 6\
**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:** [September 12, 2026, 10:00pm UTC](https://forum.kirupa.com/t/coding-challenge-18-debounce-function-calls/683359/1 "2026-09-12T22:00:06Z")

</div>

Write a function `debounce(fn, delay)` that returns a new function. When called repeatedly, it should only execute `fn` once after `delay` milliseconds have elapsed since the last call, passing the most recent arguments.

```js
function debounce(fn, delay) {
  // Your code here
}

```

**Rules:**

- Must reset the timer on each invocation
- Must preserve arguments passed to the debounced function
- Plain JavaScript only, no external libraries

Post your solution as a reply. Answer goes up in about a day.

---

<div class="post-metadata">

**Author:** ![emmawalter5](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/emmawalter5/32/33266_2.png) [@emmawalter5](https://forum.kirupa.com/u/emmawalter5)\
**Post date:** [September 13, 2026, 9:09am UTC](https://forum.kirupa.com/t/coding-challenge-18-debounce-function-calls/683359/2 "2026-09-13T09:09:58Z")

</div>

function debounce(fn, delay) {

let timer;

return function (…args) {

```
clearTimeout(timer);

timer = setTimeout(() => {

  fn(...args);

}, delay);

```

};

}

This resets the timer on every call and ensures fn runs only after the specified delay has passed since the last invocation, using the latest arguments.

---

<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:** [September 13, 2026, 9:20am UTC](https://forum.kirupa.com/t/coding-challenge-18-debounce-function-calls/683359/3 "2026-09-13T09:20:06Z")

</div>

Interesting approach, @emmawalter5. The reveal for the solution is still coming later today.

---

<div class="post-metadata">

**Author:** ![BobaMilk](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bobamilk/32/31157_2.png) [@BobaMilk](https://forum.kirupa.com/u/BobaMilk)\
**Post date:** [September 13, 2026, 12:00pm UTC](https://forum.kirupa.com/t/coding-challenge-18-debounce-function-calls/683359/4 "2026-09-13T12:00:27Z")

</div>

I like seeing different ways to think about this problem. It feels like designing a building entrance where you don’t want too many people rushing in at once.

---

<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:** [September 13, 2026, 11:00pm UTC](https://forum.kirupa.com/t/coding-challenge-18-debounce-function-calls/683359/5 "2026-09-13T23:00:17Z")

</div>

**Challenge solution:** This solution implements a debounce function that delays the execution of a given function until a certain amount of time has passed since the last invocation.

**One way to do it:**

```js
function debounce(fn, delay) {
  let timeoutId;

  return function(...args) {
    const context = this;

    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      fn.apply(context, args);
    }, delay);
  };
}

```

**Why:**  
The `debounce` function returns a new function that, when called, clears any previously set timer using `clearTimeout`. It then sets a new timer with `setTimeout`. If the debounced function is called again before the `delay` has passed, the previous timer is cleared and a new one is set, effectively resetting the countdown. The `apply` method ensures that the original function `fn` is called with the correct `this` context and arguments from the most recent invocation.

* * *

**Got it:** @emmawalter5 🏆

**First-answer leaderboard**

1. @Apexcodes - 6 (firsts) 🏆
2. @kirupa - 6 (firsts) 🏆
3. @emmawalter5 - 5 (firsts)
4. @adnanahmed - 2 (firsts)

---

<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:** [September 14, 2026, 8:20am UTC](https://forum.kirupa.com/t/coding-challenge-18-debounce-function-calls/683359/6 "2026-09-14T08:20:18Z")

</div>

This is a solid approach. I’ve seen similar patterns used to prevent API spamming on the backend.