| کانال توسعه‌دهندگان جاوااسکریپت |
⏱ جلوگیری از اجرای اضافی event با debounce ساده
تو پروژه‌های فرانت، eventهایی مثل scroll و input می‌تونن تو هر ثانیه ده‌ها بار فایر بشن و باعث لگ، مصرف CPU و رندر اضافه بشن. یک تکنیک ساده برای کنترل این ماجرا، استفاده از debounce هست. 😉
ایده: تا وقتی کاربر داره پشت‌سرهم تایپ یا اسکرول می‌کنه، تابع اصلی اجرا نشه؛ فقط وقتی یک مدت کوتاه هیچ eventی نیومد، تابع رو صدا بزن.
function debounce(fn, delay) {
let timeoutId;
return function (...args) {
if (timeoutId) clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
const handleSearch = debounce((event) => {
console.log("Search:", event.target.value);
}, 400);
const input = document.querySelector("#search");
input.addEventListener("input", handleSearch);
💡 این کار تعداد requestهای سرچ، رندر مجدد و لاگ‌ها رو به‌شدت کم می‌کنه و UX نرم‌تری می‌سازه.
مرجع بیشتر در مورد timing ها و eventها:
MDN - setTimeout
امتحانش روی inputهای سرچ یا resize و scroll نتیجه خیلی ملموسی می‌دهد. 🚀
🔖 #Javascript #JS #جاوااسکریپت #JavaScript #debounce #performance #events #frontend
👤 Developix
💎 Channel: @DevelopixJavascript
5 · 1.4K ·