Throttling در جاوا اسکریپت ساده ترین توضیح✨🚀

Throttling چیست؟

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

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

چگونه Throttling را در جاوا اسکریپت پیاده سازی کنیم؟

راه های مختلفی برای پیاده سازی throttling در جاوا اسکریپت وجود دارد. یکی از روش های رایج استفاده از تابع تایمر مانند setTimeout یا تفاوت زمان روش (روش قدیمی) برای بسته بندی تابع در حال گاز. تابع تایمر را می توان برای اعمال تاخیر بین تماس های تابع دریچه گاز استفاده کرد و به آن اجازه می دهد فقط یک بار در بازه زمانی مشخص شده فراخوانی شود.

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

در اینجا مثالی از نحوه اجرای تابع دریچه گاز با استفاده از آن آورده شده است setTimeout:

function throttle(mainFunction, delay) {
  let timerFlag = null; // Variable to keep track of the timer

  // Returning a throttled version 
  return (...args) => {
    if (timerFlag === null) { // If there is no timer currently running
      mainFunction(...args); // Execute the main function 
      timerFlag = setTimeout(() => { // Set a timer to clear the timerFlag after the specified delay
        timerFlag = null; // Clear the timerFlag to allow the main function to be executed again
      }, delay);
    }
  };
}

استفاده از مورد

// Define a function that fetches some data from an API
function fetchData() {
  console.log("Fetching data...");
  // Simulate an API call with a random delay
  setTimeout(() => {
    console.log("Data fetched!");
  }, Math.random() * 1000);
}

// Throttle the fetchData function with a delay of 5000 ms
const throttledFetchData = throttle(fetchData, 5000);

// Add an event listener to the window scroll event that calls the throttledFetchData function
window.addEventListener("scroll", throttledFetchData);

در این مثال، a را تعریف می کنیم throttle تابعی که الف را می گیرد callback و تاخیر به عنوان استدلال. را throttle تابع یک تابع جدید را برمی‌گرداند که آن را می‌پیچد callback با منطقی که استفاده می کند setTimeout برای ایجاد یک تایمر تایمر تضمین می کند که تماس برگشتی فقط یک بار در داخل فراخوانی می شود delay دوره زمانی. اگر تابع برگشتی دوباره قبل از انقضای زمان سنج فراخوانی شود، هیچ کاری انجام نمی دهد.

سپس الف را تعریف می کنیم fetchData تابعی که یک تماس API را با تاخیر تصادفی شبیه سازی می کند. ما استفاده می کنیم throttle تابع ایجاد a throttledFetchData عملکردی که 5000 میلی ثانیه تاخیر دارد. ما یک رویداد شنونده به رویداد اسکرول پنجره اضافه می کنیم که the را فراخوانی می کند throttledFetchData تابع.

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

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

Throttling می تواند عملکرد و تجربه کاربری صفحات وب را با کاهش تعداد عملیات غیر ضروری یا اضافی بهبود بخشد. همچنین می تواند از برخی مشکلات مانند:

• بارگیری بیش از حد سرور یا مرورگر با درخواست ها یا محاسبات بسیار زیاد
• فراتر رفتن از محدودیت نرخ یا سهمیه APIها یا خدمات
• هدر دادن پهنای باند یا منابع برای عملیاتی که قابل مشاهده یا مربوط به کاربر نیست
• ایجاد انیمیشن ها یا تعاملات janky یا laggy

مثال غیر فنی از دریچه گاز:

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

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

Throttling برای سناریوهایی مناسب است که می‌خواهید تعداد دفعات فراخوانی یک تابع را محدود کنید، اما نمی‌خواهید هیچ تماسی را از دست بدهید. به عنوان مثال، ممکن است بخواهید از throttling برای موارد زیر استفاده کنید:

• واکشی داده ها از یک API یا پایگاه داده زمانی که کاربر پیمایش می کند، اندازه را تغییر می دهد یا تایپ می کند
• به روز رسانی یا متحرک سازی عناصر در صفحه زمانی که کاربر پیمایش می کند، اندازه را تغییر می دهد یا ماوس را حرکت می دهد.
• ثبت یا ردیابی اقدامات یا رویدادهای کاربر در صورت وقوع مکرر

نتیجه

Throttling تکنیکی است که تعداد دفعات فراخوانی یک تابع را در یک بازه زمانی معین محدود می کند. برای بهبود عملکرد و پاسخگویی صفحات وب که دارای شنوندگان رویداد هستند که عملیات سنگین یا گران قیمت را راه اندازی می کنند مفید است. Throttling را می توان با استفاده از توابع تایمر مانند setTimeout یا setInterval در جاوا اسکریپت پیاده سازی کرد. Throttling برای سناریوهایی مناسب است که می‌خواهید تعداد دفعات فراخوانی یک تابع را محدود کنید، اما نمی‌خواهید هیچ تماسی را از دست بدهید.

امیدوارم این وبلاگ برای شما مفید بوده باشد و چیز جدیدی در مورد throttling در جاوا اسکریپت یاد گرفته باشید. می توانید مقاله من را در این مورد بررسی کنید انحراف در جاوا اسکریپت اینجا.

اگر سؤال یا بازخوردی دارید، لطفاً در زیر نظر دهید. با تشکر برای خواندن! 😊