⚙️ Debounce vs Throttle – বিস্তারিত ব্যাখ্যা ও পার্থক্য

🔍 প্রথমে বুঝে নিই: কেন এদের দরকার?

JavaScript-এ কিছু event (যেমন scroll, resize, keypress, input) অনেকবার দ্রুত ঘটে।
এই ইভেন্টগুলিতে বারবার function কল করলে performance সমস্যা হয়।

তাই এই দুইটি টেকনিক ব্যবহার করা হয়:

• Debouncing: function কে delay করে একবার call করা
• Throttling: function কে নির্দিষ্ট সময় পরপর call করা

🌀 Debounce – বিস্তারিত

📖 সংজ্ঞা:

Debounce হলো একটি টেকনিক যেখানে একটি ফাংশন কেবল তখনই execute হয়, যদি নির্দিষ্ট সময়ের মধ্যে আর কোনো নতুন কল না আসে। প্রতিবার যখন ফাংশনটি কল করা হয়, আগের টাইমার cancel হয়ে যায় এবং নতুন করে delay শুরু হয়। তাই, ফাংশনটি ইভেন্ট বন্ধ হওয়ার পরে একবার মাত্র চলে।

📦 Real-life Example:

ধরো আপনি একটা ইনপুট বক্সে টাইপ করছেন, এবং প্রতিবার টাইপ করার সময় API call হচ্ছে।
এর বদলে, আপনি চাইছেন — টাইপ করা থেমে গেলে ৫০০ms পরে মাত্র একবার API call হবে।

Visualization of Debounce

User typing:   a---b---c--------          (user input)
Debounce Call: -------------------[Call]  (call happens only after stop typing)

✅ Debounce Code উদাহরণ:

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

// ব্যবহার:
const handleSearch = debounce(() => {
  console.log("Searching...");
}, 500);

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

⏳ Throttle – বিস্তারিত

📖 সংজ্ঞা:

Throttle হলো এমন একটি টেকনিক যেখানে আপনি একটি ফাংশনকে নির্দিষ্ট সময়ের মধ্যে একবার চালাতে দেন, এবং ওই সময়সীমার মধ্যে যতবারই ফাংশন কল করা হোক না কেন — সেগুলো ignore হয়ে যায়। অর্থাৎ, নিয়মিত বিরতিতে ফাংশনটি চলে।

📦 Real-life Example:

আপনি চাইছেন scroll ইভেন্টে প্রতি ২০০ms পর পর স্ক্রল পজিশন log হোক।
যতই scroll হোক না কেন, প্রতি ২০০ms পর একবারই log হবে।

Visualization of Throttle

User action:   |||||||||||||          (continuous scroll)
Throttle Call: |   |   |   |          (every 200ms only one function call)

✅ Throttle Code উদাহরণ:

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

// ব্যবহার:
const logScroll = throttle(() => {
  console.log("Scrolling...");
}, 200);

window.addEventListener("scroll", logScroll);

⚖️ পার্থক্য: Debounce vs Throttle

🎯 কখন কোনটা ব্যবহার করবো?

📦 lodash দিয়ে debounce / throttle করা যায়

import { debounce, throttle } from "lodash";

// Debounce:
const debouncedFn = debounce(() => {
  console.log("Debounced");
}, 300);

// Throttle:
const throttledFn = throttle(() => {
  console.log("Throttled");
}, 300);

🧾 উপসংহার: