🌐 چرا debounce و throttle از واجبات فرانت‌اند مدرن‌اند؟

🔸 اگر روی input search، resize، scroll یا mousemove کار کرده باشی، احتمالاً بدون بهینه‌سازی، ده‌ها یا صدها بار تابع اجرا می‌شود.

🔸 دو ابزار مهم:

Debounce:
صبر می‌کند تا کاربر دست از تکرار بردارد، بعد اجرا می‌کند

Throttle:
در هر بازه زمانی فقط یک‌بار اجرا می‌کند


🔸 مثال Debounce در جاوااسکریپت

function debounce(fn, delay = 300) {
  let timer;

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

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

searchInput.addEventListener(
  "input",
  debounce((e) => {
    console.log("Searching for:", e.target.value);
  }, 400)
);

🔸 کِی از کدام استفاده کنیم؟

سرچ باکس: debounce

اسکرول و ریسایز: throttle

autocomplete API: معمولاً debounce

🔸 اگر این دو را درست استفاده نکنی، هم UX خراب می‌شود هم API بی‌خود لود می‌خورد.

🆔 @rezadolati01