Top 5 JavaScript Interview Problems (With Real-World Solutions)

Chapter 5: Debounce and Throttle — Controlling Function Execution Like a Pro

🧠 Why This Matters

In interviews (especially frontend-focused), you're almost guaranteed to get hit with a debounce or throttle challenge. These are essential for:

• Optimizing scroll, resize, input, and API events
• Preventing performance bottlenecks
• Managing real-time user interactions

Interviewers love asking you to:

• Build debounce() or throttle() from scratch
• Apply them in live UIs
• Explain the difference and tradeoffs

Let’s break it down — and then apply it like you're in a real system interview.

📍 What Is Debounce?

Debounce delays execution until the user stops triggering the event.

function debounce(fn, delay) {

  let timer;

  return function (...args) {

    clearTimeout(timer);

    timer = setTimeout(() => fn.apply(this, args), delay);

  };

}

🛠️ Use it for: search inputs, resize events, keypresses

📍 What Is Throttle?

Throttle ensures the function runs at most once in a given interval — regardless of how often it's called.

function throttle(fn, limit) {

  let lastCall = 0;

  return function (...args) {

    const now = Date.now();

    if (now - lastCall >= limit) {

      lastCall = now;

      fn.apply(this, args);

    }

  };

}

🛠️ Use it for: scroll tracking, resize handlers, mousemove, infinite scroll

🚀 Real Interview Challenge #1: Build debounce()

Prompt:
Implement a debounce() function from scratch.

const log = debounce(() => console.log("Typing..."), 500);

window.addEventListener("keydown", log);

✅ It should only log once user stops typing for 500ms.

🚀 Real Interview Challenge #2: Build throttle()

Prompt:
Implement a throttle() function that ensures a function runs only once per 1000ms, even if triggered rapidly.

const update = throttle(() => console.log("Scroll event"), 1000);

window.addEventListener("scroll", update);

✅ It should log at most once every second, no matter how fast you scroll.

🚀 Real Interview Challenge #3: Debounced Input Field

Prompt:
Create an input field that triggers a search function only after the user stops typing for 500ms.

<input type="text" id="searchBox" placeholder="Search...">

const search = debounce((e) => {

  console.log("Searching for:", e.target.value);

}, 500);

document.getElementById("searchBox").addEventListener("input", search);

🧠 Interviewers may ask you to build this live in a browser or CodePen-like environment.

🚀 Real Interview Challenge #4: Combine Debounce + Throttle

Prompt:
Create a search bar that:

• Debounces input before triggering search
• Throttles the number of API calls per second to avoid hitting a rate limit

🎯 Interview-Level Logic:

const search = (query) => {

  // Simulate API

  console.log("Fetching:", query);

};

const throttledSearch = throttle(search, 1000);

const debouncedInput = debounce((e) => throttledSearch(e.target.value), 300);

document.getElementById("searchBox").addEventListener("input", debouncedInput);

🧠 Interview Trap Questions

• What happens if you debounce inside throttle? (and vice versa?)
• How does closure help debounce/throttle work?
• How would you write a React hook for debounce?

✅ Summary