هذا ليس مجرد مقال آخر يحاول شرح كيف يعمل Debuce أو اختناق على مستوى الكود بدلاً من ذلك هو توضيح لتذكر المفهوم وتصوره حتى تتمكن من تطبيقها عمليًا في عملك.

شخصياً ، غالبًا ما أجد نفسي أنسى مفاهيم التعبير والخنق ، لذلك عندما يطلب مني شخص ما أن أشرحها - أو إذا ظهر سؤال في مقابلة - أنا فقط وميض؟ لتجنب ذلك ، صنعت صفحة بسيطة للمساعدة في تحديث ذاكرتي. إذا كنت لا تريد أن تشعر وكأنك متابعة دجال؟.

في codepen أدناه ، قمت بتعيين التأخير إلى ثانيتين لكل من Debounce و Throttle. حاول النقر على المواد الغذائية العشوائية وإعطاء توقف مؤقت.

فِهرِس

تشبيه المطعم
توضيح
• لماذا يصرخ أو خنق على أي حال؟
  JS معالج الأحداث
  ما هو الخطأ ؟
  Debounce
  خنق

رابط إلى الصفحة

Ashiqsultan.github.io رابط جيثب
تشبيه المطعم

تخيل أنك في مطعم وتريد طلب بعض الطعام ، لذلك يمكنك اختيار القائمة من الطاولة وتبدأ فقط في قراءة جميع العناصر. (في صفحة الويب التي شاركتها ، سيكون النقر على العناصر الغذائية المختلفة مكافئة لقراءة عنصر القائمة)

القياس هنا

؟ قراءة عنصر الغذاء =؟ زر انقر فوق
؟ ‍؟ النادل ذاهب إلى المطبخ =؟ استدعاء API

وتخيل أن هناك ثلاثة أنواع مختلفة من النوادل في المطعم الذين يمكنهم خدمتك:

1. ؟ ‍ ‍ ‍ النادل العادي

   يلاحظ كل مرة تذكر فيها عنصرًا
   يركض إلى المطبخ لكل عنصر فردي
   مثل JS التعامل مع كل حدث واحد على الفور

2. ؟ نادل معرّف

   عندما تبدأ في قراءة القائمة ، فسوف ينتظر أن تتوقف مؤقتًا لمدة ثانيتين على الأقل قبل أخذ الطلب.
   مثل انتظار المستخدم لإنهاء الكتابة قبل إجراء مكالمة API

3. ؟ ‍؟ النادل المخنوق

   يأخذ الطلبات مرة واحدة فقط كل ثانيتين
   إذا ذكرت عناصر متعددة خلال تلك الثوانيين ، فسوف يذهبون جميعًا بنفس الترتيب
   مثل الحد من مكالمات واجهة برمجة التطبيقات مرة واحدة كل س ثوان ، بغض النظر عن نشاط المستخدم

ملاحظة: الفرق الرئيسي هو:

debouncing: انتظر النشاط (زر انقر) للتوقف لفترة محددة للتشغيل
الاختناق: المشغلات على فترات منتظمة ، بغض النظر عن وقت إيقاف النشاط
أيضًا 2 ثانية هو مجرد شيء استخدمته كمثال يمكن أن يكون أي timeperiod

توضيح

لماذا تصيب أو خنق على أي حال؟

قبل فهم Debounce أو Throttle ، نحتاج إلى معرفة سبب استخدامها في المقام الأول. لمعرفة ذلك ، دعنا نفهم سلوك معالجات أحداث JS

معالجات الأحداث في JS

في JS ، تعتبر معالجات الأحداث مجرد وظائف تنفذ عندما تحدث أحداث معينة (مثل النقرات أو الكتابة أو التمرير).

افتراضيًا ، ستطلق هذه المعالجات كل مرة يحدث فيها الحدث - كل ضغط مفتاح ، كل نقرة ، أو حركة تمرير.

// معالج الأحداث الأساسي button.addeventListener ('click' ، function () { console.log ("زر النقر!") ؛ }) ؛ // معالج ضغط المفاتيح الأساسي input.adDeventListener ('keyup' ، function () { console.log ('مفتاح الضغط!') ؛ }) ؛

// Basic event handler
button.addEventListener('click', function() {
    console.log('Button clicked!');
});

// Basic keystroke handler
input.addEventListener('keyup', function() {
    console.log('Key pressed!');
});

ما هو الخطأ؟

قل على سبيل المثال ، لديك زر من شأنه إجراء مكالمة API

وظيفة makeapicall () { console.log ("API Call Made") ؛ } button.addeventListener ('Click' ، () => { makeapicall () ؛ }) ؛

// Basic event handler
button.addEventListener('click', function() {
    console.log('Button clicked!');
});

// Basic keystroke handler
input.addEventListener('keyup', function() {
    console.log('Key pressed!');
});

ستقوم الوظيفة أعلاه بتنفيذ makeapicall () في كل زر انقر فوق (أي)

إذا تمكنت من الضغط عليه 10 مرات خلال 1 ثانية ، خمن ما قمت به 10 مكالمات API في 1 ثانية. هذا هو السلوك الافتراضي.

لكن إطلاق API في كل مرة لحدث ما يمكن أن يكون غير فعال ومعظم الأوقات هذا ليس ما تبحث عنه. هذا هو المكان الذي يأتي فيه الاختناق والتعبير إلى الصورة.

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

الاختناق و debouncing هما أكثر طريقتان شيوعتين للتحكم في معدل استجابة مستمع الحدث.

debouncing

لن أشرح الكود الخاص بـ Debusting حيث يمكن استيراد هذا من Lodash ، بل سنرى أين يمكنك استخدامه بالفعل.

استخدم debouncing عندما تريد إجراء مكالمة API فقط إذا توقف المستخدم عن الكتابة لفترة معينة من الوقت أو توقف عن النقر لفترة معينة من الوقت.

في مثالنا إذا استمر المستخدم في النقر على الزر حتى لمدة 5 دقائق مباشرة ، سيتم إجراء مكالمة API مرة واحدة فقط.

لذلك يحدث شيئان هنا:

يحتاج المستخدم إلى التوقف عن النقر.
توقف عن النقر فوق يعني على الأقل لمدة ثانيتين ، يجب ألا يكون هناك نقرة على الزر.

خنق

الخانق مثل الفاصل الزمني. استخدم هذا عندما لا ترغب في الانتظار حتى يتوقف المستخدم بدلاً من إجراء مكالمة API على كل فاصل فاصل يقول ثانيتين

مثال إذا كان المستخدم يكتب لمدة دقيقة واحدة على التوالي دون توقف عن الإيقاف المؤقت لكل 2 ثانية ، فستتصل بآبار واجهة برمجة التطبيقات.

خاتمة

كما هو مذكور في المقالة ، هذا ليس لشرح كيفية عمل الوظائف بدلاً من ذلك لتصور وفهم سبب استخدامه. بالتأكيد أوصيك أن تفهم على مستوى التعليمات البرمجية كيفية عملها ، لكن شخصياً ستستمر في استخدام Debounce and Throttle التي توفرها مكتبة Lodash وليس لإعادة اختراع العجلة.

إذا كنت تحب المقالة اترك إبهامًا ، فسيحفزني ذلك حقًا على كتابة المزيد. شكرًا ؟.