پرتاب در مقابل دفع در جاوا اسکریپت

بهینه سازی عملکرد در ساخت برنامه های وب مدرن ضروری است. برای ارائه یک تجربه کاربری صاف و پاسخگو ، توسعه دهندگان اغلب برای تقویت بهره وری به تکنیک های مختلف متکی هستند. در میان اینها ، تسکین دهنده وت زباله به عنوان استراتژی های ساده و در عین حال بسیار مؤثر که در JavaScript برای تقویت عملکرد استفاده می شود ، ایستادگی کنید.

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

دفع چیست؟

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

مثال:

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

const handleInput = debounce((e) => {
  console.log("API call for:", e.target.value);
}, 300);

بیایید بگوییم که شما یک قسمت ورودی جستجو دارید و می خواهید یک تماس API برای واکشی نتایج جستجو برقرار کنید. بدون دفع کردن ، هر بار که کاربر وارد یک شخصیت می شود ، یک تماس API برقرار می شود ، که می تواند به تعداد زیادی از تماس های API غیر ضروری منجر شود. debouncing تضمین می کند که تماس API فقط پس از متوقف کردن تایپ برای مدت زمان مشخصی انجام می شود.

در مثال بالا ، Debouncing فقط پس از متوقف کردن تایپ کردن 300 متر زمان ، با API تماس می گیرد.

زباله

• تضمین می کند که یک تابع فقط در هر بازه زمانی مشخص یک بار نامیده می شود.
• بهترین برای: رویدادهای پیمایش ، تغییر اندازه پنجره ، حرکت ماوس.

مثال:

function throttle(func, limit) {
  let inThrottle;
  return function (...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

// Usage
const handleResize = throttle(() => {
  // Update element positions
  console.log('Window resized');
}, 100);

window.addEventListener('resize', handleResize);

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

در واکنش

• با استفاده از USECALLBACK با توابع Debounce/دریچه گاز سفارشی.
• اختیاری: معرفی lodash.debounce یا lodash.throttle.
• استفاده از قلاب های سفارشی برای رسیدگی به Debounce یا دریچه گاز که یک نقطه تماس و قابل استفاده مجدد در سراسر پروژه خواهد بود.

خواندن بیشتر
تسکین دادن
دریچه گاز

با تشکر از خواندن این پست روز خوبی داشته باشید 🙂