مفهوم Debounce و Throttle در جاوااسکریپت

در برنامه‌نویسی وب، مدیریت صحیح رویدادها یکی از چالش‌های مهم برای توسعه‌دهندگان است. بسیاری از رویدادها مانند scroll، resize یا keypress می‌توانند در بازه‌های کوتاه زمانی چندین بار اجرا شوند که باعث کاهش عملکرد برنامه می‌شود. برای مقابله با این مشکل، دو تکنیک پرکاربرد به نام‌های Debounce و Throttle معرفی شده‌اند.

Debounce چیست؟

Debounce یک تکنیک است که اجرای یک تابع را تا زمانی که یک بازه زمانی مشخص از آخرین فراخوانی آن گذشته باشد به تأخیر می‌اندازد. این روش برای موقعیت‌هایی مناسب است که نیاز داریم تنها یک بار پس از پایان تعامل کاربر، عملیات انجام شود.

مثال:

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

const handleResize = debounce(() => {
  console.log("Window resized");
}, 300);

window.addEventListener("resize", handleResize);

در این مثال، تابع handleResize تنها پس از گذشت ۳۰۰ میلی‌ثانیه از آخرین تغییر اندازه پنجره اجرا می‌شود.

Throttle چیست؟

Throttle تکنیکی است که اجرای یک تابع را محدود می‌کند تا فقط یک بار در یک بازه زمانی مشخص اجرا شود. این روش برای موقعیت‌هایی مناسب است که نیاز داریم عملکرد مداوم اما کنترل‌شده داشته باشیم.

مثال:

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function(...args) {
    const now = Date.now();
    if (!lastRan || now - lastRan >= limit) {
      func.apply(this, args);
      lastRan = now;
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(() => {
        func.apply(this, args);
        lastRan = Date.now();
      }, limit - (now - lastRan));
    }
  };
}

const handleScroll = throttle(() => {
  console.log("Scrolled");
}, 200);

window.addEventListener("scroll", handleScroll);

در این مثال، تابع handleScroll تنها هر ۲۰۰ میلی‌ثانیه یک بار اجرا می‌شود.

تفاوت بین Debounce و Throttle

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

• از Debounce: برای عملیات‌هایی مانند جستجوهای بلادرنگ، ذخیره فرم‌ها یا درخواست‌های API که فقط پس از اتمام تعامل کاربر باید انجام شوند.
• از Throttle: برای عملیات‌هایی مانند اسکرول صفحات یا تغییر اندازه پنجره که نیازمند بروزرسانی مداوم اما کنترل‌شده هستند.

با شناخت تفاوت‌ها و کاربردهای هر کدام، شما می‌توانید عملکرد برنامه خود را بهینه کرده و تجربه کاربری را ارتقا دهید.