Debounce and Throttle

Debounce = wait for pause, Throttle = limit frequency

---

What is Debounce?

"Wait for pause before executing"

Debounce delays function execution until after a pause in calls.

"Debounce delays function execution until after a specified pause in calls, useful for search inputs or resize events."

---

Debounce Example

Reset timer on each call

function debounce(func, delay) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// Usage
const debouncedSearch = debounce(searchFunction, 300);
input.addEventListener("input", debouncedSearch);

"Debounce resets the timer on each call, only executing after the pause period ends."

---

Debounce Use Cases

Search · Resize · Scroll

• Search input (wait for typing to stop)
• Window resize (wait for resizing to stop)
• Button clicks (prevent double-clicks)

"Debounce is used for search inputs, resize handlers, and preventing rapid button clicks."

---

What is Throttle?

"Limit execution frequency"

Throttle limits function execution to at most once per time period.

"Throttle limits function execution frequency, ensuring it runs at most once per specified time period."

---

Throttle Example

Execute, then ignore until time passes

function throttle(func, limit) {
  let inThrottle;
  return function (...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

// Usage
const throttledScroll = throttle(handleScroll, 100);
window.addEventListener("scroll", throttledScroll);

"Throttle executes immediately, then ignores calls until the time limit passes."

---

Throttle Use Cases

Scroll · Mouse move · API calls

• Scroll events (limit frequency)
• Mouse move events
• API rate limiting

"Throttle is used for scroll handlers, mouse move events, and limiting API call frequency."

---

Debounce vs Throttle

Debounce = wait, Throttle = limit

Feature	Debounce	Throttle
Execution	After pause	At intervals
Frequency	Can be never	Guaranteed periodic
Use Case	Search, resize	Scroll, mousemove

"Debounce waits for a pause, throttle limits frequency. Debounce may never execute if called continuously, throttle guarantees periodic execution."

---

Visual Comparison

Timeline matters

Events:  |--|--|--|--|--|--|--|--|
Debounce:                    |X|  (after pause)
Throttle:  |X|     |X|     |X|    (periodic)

---

9️⃣ React Implementation

useCallback + useRef

function useDebounce(callback, delay) {
  const timeoutRef = useRef();

  return useCallback(
    (...args) => {
      clearTimeout(timeoutRef.current);
      timeoutRef.current = setTimeout(() => {
        callback(...args);
      }, delay);
    },
    [callback, delay],
  );
}

"In React, use useCallback and useRef to implement debounce/throttle in custom hooks."

---

When to Use What

Debounce = user input, Throttle = events

• Debounce: Search, form validation, resize
• Throttle: Scroll, mousemove, API polling

"Use debounce for user input that should wait for completion, throttle for events that need periodic handling."

---

"Debounce delays execution until after a pause in calls, useful for search inputs. Throttle limits execution frequency, useful for scroll events. Debounce resets on each call and may never execute, throttle guarantees periodic execution. Both optimize performance by reducing function calls."

---

🧠 Ultra-Short Cheat Sheet

Debounce = wait for pause
Throttle = limit frequency
Debounce: search, resize
Throttle: scroll, mousemove
Reset timer vs periodic