When it comes to handling frequent user events like scroll, resize, or input, two powerful techniques stand out: Debouncing and Throttling. Mastering them can greatly improve your app’s performance and user experience.

What is Debouncing?

Definition:

Debouncing delays the execution of a function until a certain amount of time has passed since the last time the event was triggered.

Real-Life Analogy:

Imagine you're typing in a search box. You want to wait until the user stops typing before sending an API call. That's debouncing.

How It Works:

• The function waits for a pause.

• Each time the event fires, it resets the timer.

• Executes only once the event stops for the defined delay.

Example: Debounced Search Box

let counter = 0;

const getData = () => {
  console.log("Fetching data from API", counter++);
};

const debounce = (fn, delay) => {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
};

const optimizedFunction = debounce(getData, 1000);

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

Use Cases:

• Input fields

• Form validation

• Auto-save

• Window resizing

What is Throttling?

Definition:

Throttling ensures a function is called only once in a specified time interval, no matter how many times the event is triggered.

Real-Life Analogy:

Tracking scroll position every second instead of on every pixel change. That’s throttling.

How It Works:

• The function executes immediately.

• Then it waits for a fixed period before being allowed to run again.

Example: Throttled Resize Event

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

let count = 0;

const handleResize = () => {
  console.log("Window resized", count++);
};

window.addEventListener("resize", throttle(handleResize, 1000));

Use Cases:

• Scroll listeners

• Resize events

• Limiting rapid button clicks

• API polling

Key Differences

Visual Recap

Debouncing:

Typing:      a---b---c------(pause)
Execution:                 [GET DATA]

Throttling:

Scrolling:  --|--|--|--|--|--|--|--|--|--|
Execution:   [ ]   [ ]   [ ]   [ ]   [ ]

Conclusion:

• Use debouncing when you want to wait until an action stops (e.g., search input).

• Use throttling when you want to limit an action to happen at intervals (e.g., scroll).

• Both are essential for performance optimization.

Thanks for reading! If you found this helpful, feel free to share it with fellow developers or bookmark it for later reference.💡