13- متن آماده برای مصاحبه (جاوااسکریپت - Debouncing و Throttling)

۱. مقدمه (چرا به این ابزارها نیاز داریم؟)

"در دنیای جاوااسکریپت، ما با رویدادهایی مثل اسکرول، تایپ در اینپوت، یا تغییر سایز پنجره مواجهیم که ممکن است در کسری از ثانیه، صدها بار اجرا شوند. اگر مستقیماً یک تابع سنگین (مثلاً درخواست به سرور) را به این رویدادها وصل کنیم، عملکرد برنامه به شدت کاهش مییابد. برای مدیریت این وضعیت، از دو تکنیک به نامهای Debouncing و Throttling استفاده میکنیم. جالب اینجاست که هردوی این تکنیکها با استفاده از Closure در جاوااسکریپت پیادهسازی میشوند."

۲. توضیح Debouncing (با پیادهسازی)

"Debouncing یعنی اجرای تابع، فقط پس از آنکه کاربر مدتی (مثلاً ۳۰۰ میلیثانیه) از انجام عملیات دست کشید. به عبارت سادهتر: اگر کاربر مدام تایپ میکند، ما منتظر میمانیم تا مکث کند و فقط آخرین درخواست او را ارسال میکنیم.

کاربرد: جستجوی زنده (Live Search) که فقط وقتی کاربر تایپ کردن را تمام کرد، درخواست به سرور بزنیم.

پیادهسازی دستی با Closure:"

javascript

function debounce(func, delay) {
  let timerId; // این متغیر در Closure محصور میشود

  return function(...args) {
    // هر بار که رویداد رخ میدهد، تایمر قبلی را پاک میکنیم
    clearTimeout(timerId);
    
    // یک تایمر جدید تنظیم میکنیم
    timerId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// مثال استفاده:
const searchHandler = debounce((query) => {
  console.log('ارسال درخواست جستجو برای:', query);
}, 300);

// در رویداد تایپ: searchHandler(event.target.value)

۳. توضیح Throttling (با پیادهسازی)

"اما Throttling یک رویکرد متفاوت دارد. در این روش، ما تضمین میکنیم که تابع حداکثر یک بار در بازه زمانی مشخص (مثلاً هر ۱۰۰ میلیثانیه) اجرا شود. یعنی حتی اگر کاربر مدام اسکرول کند، تابع ما با فواصل منظم اجرا میشود، نه اینکه هر بار فراخوانی شود.

کاربرد: اسکرول کردن و دریافت اطلاعات بیشتر (Infinite Scroll) یا نمایش موقعیت ماوس.

پیادهسازی دستی با Closure:"

javascript

function throttle(func, limit) {
  let inThrottle; // این متغیر وضعیت قفل را در Closure نگه میدارد

  return function(...args) {
    // اگر قفل باز است (یعنی زمان مجاز گذشته)، اجرا کن
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      
      // بعد از مدت مشخص، قفل را بردار تا اجرای بعدی امکانپذیر شود
      setTimeout(() => {
        inThrottle = false;
      }, limit);
    }
  };
}

// مثال استفاده:
const scrollHandler = throttle(() => {
  console.log('در حال بارگیری محتوای جدید...');
}, 200);

// در رویداد اسکرول: scrollHandler()

۴. مقایسه سریع (تفاوت کلیدی)

"اگر بخواهم تفاوت را در یک جمله خلاصه کنم:

• Debouncing میگوید: 'منتظر میمانم تا کارت تمام شود، بعد آخرین درخواست را میفرستم.' (مناسب برای جستجو)

• Throttling میگوید: 'هر چند وقت یکبار اجازه اجرا میدهم، حتی اگر کارت تمام نشده باشد.' (مناسب برای اسکرول)

و نکته مهم این است که هردو با استفاده از Closure، وضعیت خود (تایمر یا قفل) را بین فراخوانیهای مختلف حفظ میکنند، بدون اینکه متغیرهایشان در دسترس عموم قرار گیرد."

۵. جمعبندی نهایی (نکته برتری برای مصاحبه)

"در پایان باید اضافه کنم که امروزه کتابخانههایی مثل Lodash این توابع را دارند، اما دانستن نحوه پیادهسازی دستی با Closure نشاندهنده درک عمیق از جاوااسکریپت، نحوه مدیریت حافظه و زمانبندی در مرورگر است. همچنین در مصاحبهها معمولاً از کاندیداها خواسته میشود که همین پیادهسازی ساده را بنویسند، پس مسلط بودن به این کدها بسیار ارزشمند است."

نکات اجرایی برای مصاحبه:

• هنگام خواندن کد، حتماً به closure (متغیرهای timerId و inThrottle) اشاره کن.

• تفاوت apply یا ...args را برای حفظ this و آرگومانها توضیح بده.

• اگر مصاحبهگر پرسید "کدامیک بهتر است؟"، بگو بستگی به سناریو دارد و مثالهای بالا را تکرار کن.

این متن را با لحن مطمئن و روان بخوان؛ چون کاملاً مفهومی و بدون اصطلاحات اضافی نوشته شده است. موفق باشی!