How do you implement debouncing and throttling in JavaScript and when should you use each?

🚀 Introduction

When we write JavaScript, many of our functions run because of events like typing in a text box, scrolling on a page, or resizing a window. These events can happen very quickly and repeatedly. If we let the functions run every single time, the website may slow down or behave badly. To solve this, we use two techniques called debouncing and throttling. These help control how often a function is executed, making web apps faster and smoother.

⏱️ What is Debouncing?

Debouncing makes sure a function only runs after the user stops performing an action for a certain amount of time. It ignores all the quick, repeated actions and only cares about the final pause.

Think of it like this: If someone keeps ringing a doorbell many times, you only open the door once they stop ringing for a while.

Example:

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

// Example usage: Search input
const handleSearch = debounce((event) => {
  console.log("Search for:", event.target.value);
}, 500);

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

👉 Here, the search function will only run after the user stops typing for 500 milliseconds.

⏳ What is Throttling?

Throttling makes sure a function runs at most once every fixed period of time, no matter how many times the event happens. Instead of waiting for the action to stop, it executes regularly in intervals.

Think of it like this: If someone keeps ringing the doorbell non-stop, you decide to open the door only once every 10 seconds, no matter how many times they press it.

Example:

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

// Example usage: Scroll event
const handleScroll = throttle(() => {
  console.log("Scroll event triggered");
}, 1000);

document.addEventListener("scroll", handleScroll);

👉 This means the scroll function will only run once every second, even if the user scrolls very fast.

🔑 Key Differences Between Debouncing and Throttling

⌚ Execution Timing

Debouncing: Waits until the user has stopped doing something for a while, then runs the function.
Throttling: Runs the function at steady time intervals, no matter how often the event happens.

🎯 Best Use Cases

Debouncing: Perfect for things like search boxes, where you only want to search after typing is done. Also useful for window resize events and auto-saving forms.
Throttling: Best for events that happen very frequently, like scrolling or resizing animations, where you want updates but not too many.

⚡ Performance Impact

Debouncing: Reduces unnecessary calls by only caring about the final event.
Throttling: Makes sure functions run steadily, which prevents them from running too many times per second.

📘 Best Practices

✅ Use debouncing when you want to delay execution until the user stops performing an action.
✅ Use throttling when you want to make sure a function runs consistently at intervals.
⚠️ Always choose based on the behavior you want. For example, don’t debounce a scroll event if you need updates while scrolling.

📝 Summary

Debouncing and throttling are techniques that help control how often functions run in JavaScript when triggered by frequent events. Debouncing waits until the user has stopped performing an action, while throttling makes the function run at fixed intervals during the action. By using these techniques correctly, developers can make web apps run faster, smoother, and with fewer unnecessary function calls.