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

الگوهای debounce و throttle در جاوا اسکریپت برای مدیریت کارایی و عملکرد بهتر توابع در زمان‌هایی که بسیاری از رویدادها رخ می‌دهند بکار می‌روند. در این پست آموزشی، به توضیح debounce و throttle می‌پردازیم و نحوه استفاده از آن‌ها را در زبان جاوا اسکریپت بررسی می‌کنیم.

Debounce

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

در زیر یک مثال ساده از استفاده از debounce را در نظر بگیرید:

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

// تابعی برای فراخوانی هنگام تغییر متن در یک ورودی ایجاد می‌کنیم
const input = document.querySelector('#myInput');
const handleInput = () => {
  console.log('مقدار تغییر کرد:', input.value);
};

// تابع debounce را با تابع handleInput فراخوانی می‌کنیم
const debouncedHandleInput = debounce(handleInput, 300);

// به یک رویداد input گوش می‌کنیم و تابع debouncedHandleInput را صدا می‌زنیم
input.addEventListener('input', debouncedHandleInput);

در این مثال، تابع debounce یک تابع بازمی‌گرداند که تابع اصلی func را با تاخیر مشخص (delay) فراخوانی می‌کند. هربار که تابع بازگشتی صدا زده می‌شود، تابع func را فراخوانی می‌کند ولی اگر تابع بازگشتی قبل از انقضای تاخیر مجدداً صدا زده شود، تابع قبلی لغو می‌شود و تاخیر مجدداً شروع می‌شود.

Throttle

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

مثال زیر نحوه استفاده از throttle را نشان می‌دهد:

function throttle(func, delay) {
   let throttled = false;
    return function(...args){
        if(!throttled){
            fn.apply(this,args);
            throttled = true;
            setTimeout(()=>{
                throttled = false;
            }, wait);
        }
    }
}

// تابعی برای فراخوانی هنگام حرکت موس در یک المان ایجاد می‌کنیم
const box = document.querySelector('#myBox');
const handleMouseMove = (event) => {
  console.log('موقعیت موس تغییر کرد:', event.clientX, event.clientY);
};

// تابع throttle را با تابع handleMouseMove فراخوانی می‌کنیم
const throttledHandleMouseMove = throttle(handleMouseMove, 500);

// به یک رویداد mousemove گوش می‌کنیم و تابع throttledHandleMouseMove را صدا می‌زنیم
box.addEventListener('mousemove', throttledHandleMouseMove);

در این مثال، تابع throttle یک تابع بازمی‌گرداند که تابع اصلی func را با تاخیر مشخص (delay) فراخوانی می‌کند. اگر زمانی که تابع بازگشتی صدا زده می‌شود از آخرین فراخوانی تابع گذشته باشد، تابع func را فراخوانی می‌کند و زمان آخرین فراخوانی را به روز می‌کند.

با استفاده از debounce و throttle در جاوااسکریپت، می‌توانید کنترل بیشتری بر رویدادها و فراخوانی توابع خود داشته باشید و کارایی و عملکرد بهتری را به دست آورید.