Debouncing vs. Throttling: Don't Let Your Code Misbehave! 🍕🚀

#react #frontend #javascript #performance

Have you ever clicked a button multiple times and suddenly realized your app glitched or made too many API calls? Maybe you've typed in a search bar, and it kept sending requests after every letter?

That’s when debouncing and throttling come to the rescue! 🚀

These two JavaScript techniques control how frequently your function executes, making your app faster, smoother, and bug-free. Today, we’ll break them down in a fun, pizza-themed way—because who doesn’t love pizza? 🍕🔥

🍕 Debouncing: "Ek Baar Bolna, Baar Baar Nahi!" (Say it once, not again and again!)

Imagine you're at a pizza restaurant, and you have a habit of changing your order every second:

"Ek Margherita dedo!"(Give me one Margherita!)
"Nahi nahi, ek Pepperoni dedo!" (No no, give me one Pepperoni!)
"Wait, ek Farmhouse dedo!"(Wait, give me one Farmhouse!)
"Arey, nahi! Cheesy Burst chahiye!"(Oh no! I want Cheesy Burst!)

What happens? 🤦‍♂️
The waiter gets confused and doesn't place the order until you're finally done deciding. He waits for you to stop changing your mind before sending the order to the kitchen.

This is Debouncing. 💡

function debounce(orderFunction, delay) {
  let timer;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(orderFunction, delay); // Execute after delay
  };
}
function acceptOrder() {
  console.log("Pizza order accepted! 🍕");
}

const orderButton = document.getElementById("orderButton");
orderButton.addEventListener("click", debounce(acceptOrder, 3000));

Don't ask how timer is still available for our order. Please have a proper closure with THE CLOSURE from the one and only Akshay Saini

📝 What Happens?

If you click multiple times within 3 seconds, the function won’t execute.
It only executes after you stop clicking for 3 seconds.
✅ Perfect for search bars, form submissions, or anything that shouldn’t trigger too frequently!

⏳ Throttling: "Limit Cross Mat Karo Bhai!"(Don't Cross the Limit, Bro!)

Now imagine another scenario:

You’re super hungry and start shouting at the waiter every second:

"Bhai, pizza lao!"(Bro, bring the pizza!)
"Bhai, pizza lao!"(Bro, bring the pizza!)
"Bhai, pizza lao!"(Bro, bring the pizza!)

The waiter finally loses patience and tells you:
👉 "Aap jitni baar bhi bolo, main sirf har 5 second me ek baar order loonga!"(No matter how many times you ask, I'll only take one order every 5 seconds!)

This is Throttling—even if you keep spamming the button, the function will only execute once in a fixed time interval.

function throttle(orderFunction, duration) {
  let lastExecutionTime = 0;
  return function () {
    const currentTime = Date.now();
    if (currentTime - lastExecutionTime >= duration) {
      orderFunction();
      lastExecutionTime = currentTime;
    }
  };
}
function acceptOrder() {
  console.log("Pizza order placed! 🍕");
}

const orderButton = document.getElementById("orderButton");
orderButton.addEventListener("click", throttle(acceptOrder, 5000));

📝 What Happens?

If you click 10 times within 5 seconds, the function runs only ONCE.
After 5 seconds, the function runs again if clicked.
✅ Perfect for API rate limiting, scrolling, or any function that should execute at fixed intervals!

For our readers who want more like our pizza customers.

👉 That’s what our basic debounce function did. But now, introducing Debounce 2.0 – The Advanced Edition! 🚀

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

😒Don't fuss I have Throttle SUPERCHARGED Version as well.

function throttle(func, limit) {
  let lastCall = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastCall >= limit) {
      func.apply(this, args);
      lastCall = now;
    }
  };
}

Try it out and save your CPU from unnecessary drama.😮‍💨