عند استخدام JavaScript، قد يؤدي الإفراط في تشغيل الأحداث إلى إبطاء تطبيقك. على سبيل المثال، يمكن أن يتسبب تغيير حجم نافذة المتصفح أو الكتابة في شريط البحث في تشغيل الأحداث بشكل متكرر في وقت قصير، مما يؤثر على أداء التطبيق.

هذا هو المكان الذي يأتي فيه الاختناق والارتداد للإنقاذ. إنها تساعدك على إدارة عدد مرات استدعاء وظائفك عند التعامل مع الأحداث التي يتم تشغيلها كثيرًا.

؟ ما هو الاختناق؟

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

مثال:

تخيل أنك في حفل موسيقي، وتقوم بالتقاط الصور. لكنك تقرر التقاط صورة واحدة فقط كل 5 دقائق (مهما كان الأداء مثيرًا). هذا مثل الاختناق. بغض النظر عن عدد اللحظات التي تستحق التصوير، فسوف تلتزم بقاعدتك المتمثلة في صورة واحدة كل 5 دقائق.

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

مثال الكود:

function handleScroll() {
  console.log("Scrolled!");
}

window.addEventListener('scroll', throttle(handleScroll, 2000));

function throttle(func, limit) {
  let lastCall = 0;
  return function() {
    const now = new Date().getTime();
    if (now - lastCall >= limit) {
      lastCall = now;
      func();
    }
  };
}

في هذا المثال، سيتم تشغيل وظيفة HandleScroll مرة واحدة فقط كل ثانيتين (2000 مللي ثانية) بغض النظر عن مدى سرعة أو تكرار تمرير المستخدم.

؟ ما هو الرفض؟

يضمن الإلغاء عدم استدعاء الوظيفة إلا بعد فترة معينة من عدم النشاط. إذا استمر الحدث في إطلاقه، فستستمر الوظيفة في إعادة ضبط المؤقت ولن يتم تشغيله إلا بعد توقف الحدث.

مثال:

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

في جافا سكريبت، غالبًا ما يتم استخدام الارتداد عندما يكتب المستخدمون في مربع البحث. بدلاً من إرسال استعلام بحث بعد كل ضغطة على المفتاح، يمكنك الانتظار حتى يتوقف المستخدم عن الكتابة للحظة قبل إجراء البحث.

مثال الكود:

function handleInput() {
  console.log("User stopped typing!");
}

const inputField = document.querySelector('input');
inputField.addEventListener('input', debounce(handleInput, 500));

function debounce(func, delay) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(func, delay);
  };
}

في هذا المثال، سيتم تشغيل وظيفة HandleInput فقط بعد توقف المستخدم عن الكتابة لمدة 500 مللي ثانية.

؟ متى يتم استخدام الاختناق أو الارتداد؟

⚡️ استخدم الاختناق عندما تريد التحكم في عدد مرات استدعاء الوظيفة بمرور الوقت. جيد للأحداث مثل:

=> التمرير
=> تغيير حجم النافذة
=> حركات الماوس

⚡️ استخدم Debounceing عندما تريد التأكد من أن الوظيفة لا يتم استدعاؤها إلا بعد انتهاء الحدث. جيد للأحداث مثل:

=> الكتابة في شريط البحث
=> عمليات إرسال النماذج
=> تغيير حجم النافذة (لإجراءات مثل تعديلات التخطيط)

الخلاصة ✅

يعد التقييد والارتداد من الأساليب الرائعة لتحسين أداء تطبيقات JavaScript واستجابتها.

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

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

برمجة سعيدة! ?