الدرس 5 من 8

تحديد معدّل الاستدعاءات (throttle)

هدف الدرس

استدعاء واحد على الأكثر في كل مهلة

01

الشرح

حدث mousemove أو scroll يقع عشرات المرّات في الثانية، والتأجيل (debounce) لا يناسبه، لأنه لا ينفّذ شيئًا ما دامت الحركة مستمرّة، فيتجمّد كل ما يتبع المؤشّر حتى تتوقّف اليد.

أمّا تحديد المعدّل (throttle) فيضمن إيقاعًا ثابتًا، إذ ينفّذ أول استدعاء فورًا ثم يتجاهل كل استدعاء يأتي قبل انتهاء المهلة. فالحركة لمدة ثانيتين تُطلق نحو مئة وعشرين حدثًا، لكن مع مهلة 100 ميلي ثانية لا يُنفَّذ منها إلا نحو عشرين.

انتبه: كل ما يقع داخل المهلة يُهمَل، ومنه الحدث الأخير، فإن كانت القيمة الأخيرة تهمّك، مثل موضع التمرير النهائي، فأضف استدعاءً أخيرًا بعد انتهاء المهلة، كما تفعل throttle في مكتبة lodash.

02

المطلوب

اكتب throttle(fn, ms) لتنفّذ أول استدعاء فورًا مع وسائطه، ولا تنفّذ أكثر من مرّة واحدة في كل ms، ثم اربط حدث mousemove على #pad بـ throttle(track, 100).

الفحوص

6 فحوص
  1. الدالة throttle تُرجع دالة
  2. أول استدعاء يُنفَّذ فورًا مع وسائطه
  3. الاستدعاءات داخل المهلة تُنفَّذ مرّة واحدة
  4. بعد المهلة يُقبل استدعاء جديد
  5. الحركة المتواصلة تُنفَّذ بإيقاع منتظم
  6. المساحة #pad مربوطة بنسخة throttle
03

تلميحات

0/3
دروس المسارأتممت 0 من 8

تعرف في هذا المسار أين يضيع الوقت فعلًا في صفحتك، وكيف توفّره بإضافة العناصر مرّة واحدة وتقليل الاستدعاءات وعدم تكرار الحساب.

مستواه متقدّم، وفيه 8 دروس مجموع مدّتها ساعة ونصف.

index.html
المعاينة
index.html100%
–/6

اضغط «تشغيل وتصحيح» ليبدأ الفحص.

تجد 6 فحوص في بطاقة «المطلوب».

دروس المسارأتممت 0 من 8

تعرف في هذا المسار أين يضيع الوقت فعلًا في صفحتك، وكيف توفّره بإضافة العناصر مرّة واحدة وتقليل الاستدعاءات وعدم تكرار الحساب.

مستواه متقدّم، وفيه 8 دروس مجموع مدّتها ساعة ونصف.