Q45. What are debouncing and throttling? Explain with examples.

// ❌ সরাসরি — প্রতিটি অক্ষরে কাজ চলবে
input.addEventListener("input", (event) => {
  console.log("খোঁজা হচ্ছে:", event.target.value);
  searchOnServer(event.target.value);
});

// Debounce — ইউজার থামার ৩০০ms পরে একবারই কাজ করবে
function debounce(fn, delay) {
  let timerId;

  return function (...args) {
    // আগের অপেক্ষা বাতিল
    clearTimeout(timerId);

    // নতুন করে অপেক্ষা শুরু
    timerId = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

const input = document.getElementById("search");

const debouncedSearch = debounce((value) => {
  console.log("খোঁজা হচ্ছে:", value);
  searchOnServer(value);
}, 300);

input.addEventListener("input", (event) => {
  debouncedSearch(event.target.value);
});

// Throttle — প্রতি ১ সেকেন্ডে সর্বোচ্চ একবার কাজ করবে
function throttle(fn, delay) {
  let isThrottled = false;

  return function (...args) {
    // এখন ব্যবস্তা চলছে — ধরে ফেলা হবে
    if (isThrottled) return;

    fn.apply(this, args);
    isThrottled = true;

    setTimeout(() => {
      isThrottled = false;
    }, delay);
  };
}

const throttledScroll = throttle(() => {
  // scroll position পড়া
  const current = window.scrollY;
  console.log("প্রতি ১ সেকেন্ডে scrollY:", current);
}, 1000);

window.addEventListener("scroll", throttledScroll);

// ✅ ES6+ তে lodash ছাড়াই লেখা যায়
function debounce(fn, delay) {
  let timerId;

  return function debounced(...args) {
    clearTimeout(timerId);
    timerId = setTimeout(() => fn.apply(this, args), delay);
  };
}

// scroll-এর জন্য আলাদা ধরনের debounce
function debounceFrame(fn) {
  let frameId = null;

  return function frameThrottled(...args) {
    if (frameId !== null) return;

    frameId = requestAnimationFrame(() => {
      fn.apply(this, args);
      frameId = null;
    });
  };
}

// বাস্তব উদাহরণ — resize-এ কম কাজ
const handleResize = debounce(() => {
  const width = window.innerWidth;

  // পরিবর্তন হলে নতুন layout গুনে দেওয়া
  recalculateLayout(width);
}, 250);

window.addEventListener("resize", handleResize);

// বাস্তব উদাহরণ — সাবমিট বাটন একবার
function debounceOnce(fn, delay) {
  let called = false;

  return function (...args) {
    if (called) return;
    called = true;

    setTimeout(() => {
      fn.apply(this, args);
      called = false;
    }, delay);
  };
}

const submitOnce = debounceOnce((data) => {
  console.log("একবারই সাবমিট:", data);
}, 1000);

// ❌ মিশিয়ে ফেলে দেওয়া ভুল
const bad = debounce(throttle(fn, 1000), 500);
// debounce-এর ভেতরে ঢুকলে একটি ঘটনাই না হয়, ফলে ইউজার আটকে যেতে পারে