https://virgool.ir/feed/@mahbubekarimi2020دولوپرfa2026-11-11 20:56:59https://files.virgool.ir/upload/users/71906/avatar/avatar.pnghttps://virgool.ir/@mahbubekarimi2020https://virgool.ir/@mahbubekarimi2020/bounce-throttle-callback-zysilgmuilzyگاهی اوقات در برنامه نویسی فرانت متوجه رویدادهای انفجاری میشیم رویدادهای انفجاری زمانی رخ میدهند که سرعت کار کاربر از اکشن های ما بیشتر است به طور مثال حرکت یک تولتیپ یا اسکرول سریع صفحه یا حتی تایپ متن و ... که باعث میشه عملکرد مرورگر دچار مشکل بشه یا اصطلاحا هنگ کنه به طور مثال در تصویر نشون میده که کاربر در حال جستجو کشوری هست با هر بار زدن کلید یک درخواست (HTTP) به سمت سرور میره و تا پاسخ (Response) اون نیومده کلید بعدی توسط کاربر زده شده به تعداد درخواست ها توجه کنید در این حالت تعداد ریکوست ها زیاد میشه و همون قضیه رویداد انفجاری که اول گفتم پیش میاد اگریک دولوپر فرانت اند هستید احتمالا به این مدل مشکلات خیلی خوردید ... خب حالا برا حلش باید چیکار کنیم ?‍♀️Debounce و Throttle برای کاهش این درخواست های HTTP به میدان میان به مرورگر میگن اگر انگشت روی کلید زده شد تا وقتی من نگفتم درخواست HTTP رو ارسال نکن !خب ! حالا بیاییم کدش رو بررسی کنیم const search = async (city) => await axios.get(`https://restcountries.eu/rest/v2/name/${city}`) این کد لیست شهرها رو با جستجو رشته city از وب سرویس میگیره استفاده از Throttle Throttle همونطور که میبینید یک تابع بازگشتی که اولین بازی که اجرا میشه مقدار inThrottle برابر با false است سپس با فراخوانی مجدد تابع مقدار true را به خود میگیرد و تابع callback بنام fn اجرا می شود درا دامه همین روند inThrottle به مدت delay (مدت زمان ورودی) مقدار false را به خود میگیرد Throttle این اجازه رو به شما نمی دهد که تابع را پشت سرهم اجرا کنید مگر اینکه مقدار inThrottle برابر با false باشد حالا شکل صدا زدن تابع search را تغییر میدیم :const sendRequestThrottle = throttle(500, search); <input type="text" ={sendRequestThrottle} />نکته : این متد را باید به شکل HOF (تابع مرتبه بالاتر) نوشت فراموش نکنید نباید متد throttle را در سطح کامپوننت نوشت زیرا با رندر شدن کامپوننت مقدار inThrottle رفرش و false خواهد شد استفاده از DebounceDebounceمیبینیم که کد debounce بسیار شبیه کد throttle هست با این تفاوت که چک نمیکند که آیا متغییر inDebounce مقدار True دارد یا نه ! اگر تابع callback بنام fn در طول مدت زمان delay اجرا شده باشد setTimeOut قبلی پاک شده و یک setTimeOut جدید ایجاد می شود بنابراین اگر بطور مداوم و سریع کلید کیبرد فشرده شود تابع callback هرگز اجرا نخواهد شد متد جدید در رویداد :const sendRequestDebounce = debounce(500, search); <input type="text" ={sendRequestDebounce} />در بیشتر موارد اصلا نیاز نیست شما یک throttle یا debounce بنویسید چون کتابخونه های زیادی هستند که با امکانات بیشتر میتونند کمکتون کنند به طور مثال Lodash محبوبه کریمیمحبوبه کریمیWed, 07 Sep 2022 10:51:04 +0430https://virgool.ir/@mahbubekarimi2020/متد-eval-در-جاوااسکریپت-pmueidlplorrمتد eval ()این امکان رو به ما میده که یک رشته متنی رو به صورت یک کد جاوا اسکریپت اجرا کنیم استفاده ازش چندان جالب نیست و معمولا به صورتbad practicesازش یاد میشهبه هر حال یک متد هست که توسط جاوا اسکریپت تعریف شده و ممکنه جایی مجبور باشیم ازش استفاده کنیم اگر مجبور بودید یادتون باشه ممکنه یک حفره امنیتی براتون ایجاد کنهمحبوبه کریمیمحبوبه کریمیSat, 27 Aug 2022 09:36:26 +0430