وقتی روی فرم جستجو هر keypress مستقیماً درخواست به سرور بفرستد، هم backend تحت فشار می‌رود هم UI کند می‌شود. یک الگوی ساده با debounce کمک می‌کند فقط وقتی کاربر چند لحظه تایپ را متوقف کرد، درخواست زده شود. 🔎

ایده این است: هر بار کاربر تایپ می‌کند، یک timeout قبلی لغو می‌شود و یک جدید تنظیم می‌شود. اگر تا مثلاً ۴۰۰ms چیزی تایپ نشد، تابع واقعی اجرا می‌شود (فراخوانی API، فیلتر لیست و ...).

✅ نتیجه:
- درخواست‌های کمتر به سرور
- UI روان‌تر
- کد تمیزتر نسبت به if/elseهای تکراری روی eventها

یک پیاده‌سازی ساده و عمومی در JS:

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

const searchInput = document.querySelector('#search');

function handleSearch(e) {
  const q = e.target.value.trim();
  if (!q) return;
  // call API, fetch data, etc.
  console.log('Searching for:', q);
}

const debouncedSearch = debounce(handleSearch, 400);

searchInput.addEventListener('input', debouncedSearch);

بهتر است delay را بر اساس نوع ورودی تنظیم شود؛ برای جستجوی live معمولاً بین ۳۰۰ تا ۵۰۰ms معقول است. در UIهای سنگین (لیست‌های بزرگ، نمودارها و ...) debounce می‌تواند تفاوت محسوسی در performance ایجاد کند. 🚀

برای مطالعه بیشتر درباره الگوهای بهینه‌سازی eventها و performance در مرورگر:
MDN - Debouncing events

امتحان روی یک input ساده در پروژه فعلی کافی است تا تاثیرش روی روان بودن تجربه کاربری دیده شود. 😉

🔖 #Web #وب #Frontend #Backend #debounce #javascript #frontend #performance #web_dev

👤 Developix

💎 Channel: @DevelopixWeb

سرور اختصاصی تک‌نت؛ تحویل فوری، بدون قطعی ✅

🔹 پورت اختصاصی واقعی
🔹 آپلود رایگان
🔹 آپتایم 99.99% تضمینی
🔹 ارائه IP مازاد
🔹 پشتیبانی 24/7 (تیکت + آنلاین)
🔹 نصب سریع
🔹 پرداخت ماهیانه

⏳ ظرفیت محدود — همین الان تماس بگیر و سرویس رو رزرو کن:

📞 02191555530
🔗 https://taknet.ir/services/dedicated-server

ویراک کلود | تجربه‌ی ابری بدون محدودیت ☁️🚀

🎁 ۲۰٪ شارژ هدیه روی اولین واریزی

مزیت‌هایی که واقعاً فرق می‌سازن:
⚡️ پهنای باند 980 مگ
🌐با IP مازاد
⏱️ راه‌اندازی فوری
💳 پرداخت ساعتی
🛡 پشتیبانی ۲۴/۷

💬 هر سوالی داشتی، تیم ما کنارتـه
✅ مناسب استارتاپ‌ها، تیم‌های فنی، تا سازمان‌های بزرگ

همین الان شروع کن و با حداکثر منابع، سریع‌تر رشد کن 👇🏻

📞 تماس سریع: 02191555530
🔗 https://virakcloud.com