تکنیک debounce برای بهبود Performance در JS

ما در JS دو تکنیک معروف به نام throttle و debounce داریم که بر حسب شرایط پروژه می توانید از این تکنیک ها استفاده کنید. از debounce شروع میکنیم.

تکنیک debounce

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

function getData(lat , lng){ ... }
map.ondrag = getData;

و با drag کردن به سایر نقاط نقشه اطلاعات مربوط به آن بارگذاری میشود. اما مشکل کجاست؟ فرض کنید کاربر در نقشه میخواهد از میدان آزادی به میدان ونک، نقشه را drag کند در حین انجام این کار اطلاعات مسیر‌های مابین این دو نقطه هم بارگذاری میشود چون ما به نقشه گفتیم در هر بار drag اطلاعات نقطه جدید را دریافت کند. اما راه حل چیست راه حل استفاده از تکنیک debounce هست این تکنیک خیلی ساده هست شما در واقع تابع را طوری تعریف میکنید که تابع در اولین فراخوانی اجرا نمیشود و تا مدت معلوم منتظر می‌ماند اگر دوباره فراخوانی نشد اجرا میشود اگر دوباره فراخوانی شد صبر میکند تا دوباره بررسی کند که فراخوانی میشود یا نه؟ خوب اما روش پیاده سازی به چه صورت هست؟ من ماژول در npm نوشته ام به نامtlence که میتوانید به روش زیر نصب کنید:

npm i tlence

اما روش استفاده، برای استفاده کد بالا را به صورت زیر تغییر میدهیم:

import { debounce } from 'tlence';
function getData(lat , lng){ ... }
map.ondrag = debounce(getData,1000);

به همین راحتی! اما چه کاری انجام دادیم؟ ما در اینجا به ondrag نقشه، تابعی تحویل دادیم که با یک ثانیه تاخیر اجرا می شود این کار به ما کمک میکند تا وقتی ondrag در فاصله زمانی یک ثانیه پی در پی فراخوانی شود فقط یک بار اجرا شود. البته شما میتوانید بر حسب پروژه زمان بهینه تری تنظیم کنید فکر میکنم برای نقشه ۲ ثانیه عدد معقولی باشد.

https://www.npmjs.com/package/tlence

https://github.com/uxitten/tlence

در مقاله ای دیگری در خصوص تکنیک دیگری به نام throttle توضیح خواهم داد که در همین ماژول می توانید استفاد کنید.