Debouncing vs Throttling در JS

هر زمان که در یک برنامه پیمایش می کنید، چندین تماس API را تجربه کرده اید. تا به حال به این فکر کرده اید که چگونه می توانیم این را محدود کنیم و تماس های لازم را فقط در صورت لزوم برقرار کنیم. اگرچه این به طور مداوم داده ها را برای کاربر واکشی می کند، اما همه این تماس ها گران هستند. ممکن است سناریوهایی وجود داشته باشد که بخواهید داده های پیوسته را از سرور واکشی کنید در حالی که سایر فرآیندها چندان به این نیاز ندارند. در زیر دو روش وجود دارد که از طریق آنها می توانیم چندین تماس API را در JS محدود کنیم.

انحراف

تابع Debounce اجرای فراخوانی تابع را محدود می کند و قبل از اجرای مجدد آن مدت زمان مشخصی منتظر می ماند. محدود کردن تعداد دفعاتی که کاربر می تواند یک تابع متصل به شنونده رویداد را فراخوانی کند. این یک تابع مرتبه بالاتر است. این به معنای تابعی است که تابع دیگری را برمی گرداند.
برای جلوگیری از فراخوانی های غیر ضروری، فراخوانی تابع را برای یک دوره زمانی مشخص به تاخیر می اندازد. بنابراین، تابع تنها در صورتی فراخوانی می شود که هیچ رویدادی در آن زمان راه اندازی نشود. اگر کاربر در این مدت رویداد جدیدی را راه‌اندازی کند، زمان بازنشانی می‌شود.

استفاده از debouncing

• اسکرول مدیریت رویداد
• گزینه ارسال در یک ویژگی ارسال خودکار
• تغییر اندازه مدیریت رویداد
• پیاده سازی متن پیشنهادی

قطعه

function debounce(callback, delay = 1000) {
  var time;

  return (...args) => {
    clearTimeout(time);
    time = setTimeout(() => {
      callback(...args);
    }, delay);
  };
}

همانطور که مشاهده می کنیم، تابع debounce به عنوان یک پوشش برای تابع callback عمل می کند و تضمین می کند که پس از تاخیر فراخوانی می شود. در این حالت تاخیر پیش فرض 1000 میلی ثانیه است.

دریچه گاز

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

استفاده از دریچه گاز

• خفه کردن یک تماس API
• کنترل کننده رویداد throttling mousemove یا touchmove
• رویدادهای مداوم کاربر مانند تغییر اندازه و پیمایش

قطعه

function throttle(callback, delay = 1000) {
  let shouldWait = false;

  return (...args) => {
    if (shouldWait) return;

    callback(...args);
    shouldWait = true;
    setTimeout(() => {
      shouldWait = false;
    }, delay);
  };
}

در debouncing، تابع debounce را به عنوان بسته‌بندی تابع callback پیاده‌سازی کردیم، زیرا فراخوانی تابع callback را به تأخیر می‌اندازیم. اما در اجرای دریچه گاز، اگر پرچم shouldWait نادرست باشد، بلافاصله تابع callback را فراخوانی می کنیم. سپس، تابع setTimeout() برای به روز رسانی مقدار پرچم بر اساس تاخیری که تعریف می کنیم استفاده می شود.

تفاوت

Debounce تأخیر زمانی بین اقدامات کاربر را نظارت می کند و تنها در صورتی عملکرد برگشت تماس را اجرا می کند که تأخیر از تأخیر زمانی تعریف شده توسط توسعه دهنده بیشتر باشد. بنابراین، اگر ما از rebounce استفاده کنیم، اقدامات مستمر کاربر می‌تواند به طور قابل توجهی اجرای تابع callback را به تاخیر بیندازد.

از طرف دیگر، دریچه گاز از تأخیر زمانی برای اجرای عملکرد برگشت به تماس در فواصل زمانی منظم تا زمانی که تریگر رویداد فعال باشد، استفاده می کند. بنابراین، اجرای تابع callback را برای یک دوره قابل توجه مانند debounce به تاخیر نمی اندازد.

منابع