bounce & Throttle Callback

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

به طور مثال در تصویر نشون میده که کاربر در حال جستجو کشوری هست با هر بار زدن کلید یک درخواست (HTTP) به سمت سرور میره و تا پاسخ (Response) اون نیومده کلید بعدی توسط کاربر زده شده

به تعداد درخواست ها توجه کنید در این حالت تعداد ریکوست ها زیاد میشه و همون قضیه رویداد انفجاری که اول گفتم پیش میاد
اگریک دولوپر فرانت اند هستید احتمالا به این مدل مشکلات خیلی خوردید ...
خب حالا برا حلش باید چیکار کنیم ?‍♀️
Debounce و Throttle برای کاهش این درخواست های HTTP به میدان میان به مرورگر میگن اگر انگشت روی کلید زده شد تا وقتی من نگفتم درخواست HTTP رو ارسال نکن !

خب ! حالا بیاییم کدش رو بررسی کنیم

const search = async (city) => 
  await axios.get(`https://restcountries.eu/rest/v2/name/${city}`)

این کد لیست شهرها رو با جستجو رشته city از وب سرویس میگیره

استفاده از Throttle

همونطور که میبینید یک تابع بازگشتی که اولین بازی که اجرا میشه مقدار inThrottle برابر با false است سپس با فراخوانی مجدد تابع مقدار true را به خود میگیرد و تابع callback بنام fn اجرا می شود درا دامه همین روند inThrottle به مدت delay (مدت زمان ورودی) مقدار false را به خود میگیرد

Throttle این اجازه رو به شما نمی دهد که تابع را پشت سرهم اجرا کنید مگر اینکه مقدار inThrottle برابر با false باشد

حالا شکل صدا زدن تابع search را تغییر میدیم :

const sendRequestThrottle = throttle(500, search);
<input type=&quottext&quot ={sendRequestThrottle} />

نکته : این متد را باید به شکل HOF (تابع مرتبه بالاتر) نوشت فراموش نکنید نباید متد throttle را در سطح کامپوننت نوشت زیرا با رندر شدن کامپوننت مقدار inThrottle رفرش و false خواهد شد



استفاده از Debounce

میبینیم که کد debounce بسیار شبیه کد throttle هست با این تفاوت که چک نمیکند که آیا متغییر inDebounce مقدار True دارد یا نه !
اگر تابع callback بنام fn در طول مدت زمان delay اجرا شده باشد setTimeOut قبلی پاک شده و یک setTimeOut جدید ایجاد می شود
بنابراین اگر بطور مداوم و سریع کلید کیبرد فشرده شود تابع callback هرگز اجرا نخواهد شد
متد جدید در رویداد :

const sendRequestDebounce = debounce(500, search);
<input type=&quottext&quot ={sendRequestDebounce} />

در بیشتر موارد اصلا نیاز نیست شما یک throttle یا debounce بنویسید چون کتابخونه های زیادی هستند که با امکانات بیشتر میتونند کمکتون کنند به طور مثال Lodash