ایده این است: هر بار کاربر تایپ میکند، یک 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

