| کانال توسعه‌دهندگان وب |
وقتی روی فرم جستجو هر 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
4 · 839 ·