JavaScript

لإيقاف تشغيل الدالة التي تم تعريفها كما هو موضح في الكود عند تحقق شرط معين، يمكنك استخدام متغير تحكم (flag) يحدد ما إذا كان يجب تشغيل الدالة أم لا، فيما يلي كيفية تعديل الكود لتحقيق ذلك:

let isActive = true; // متغير تحكم يحدد ما إذا كان يجب تشغيل الدالة أم لا

cartSearcher.addEventListener('input', () => {
  if (!isActive) return; // إذا كان المتغير isActive يدل على عدم التشغيل، اخرج من الدالة

  let userInput = cartSearcher.value;
  cartProNames.forEach(element => {
    if (element.innerHTML.includes(userInput)) {
      element.parentNode.parentNode.classList.remove("d-none");
    } else {
      element.parentNode.parentNode.classList.add("d-none");
    }
  });
});

// عند تحقق الشرط المعين، قم بتعيين المتغير isActive إلى قيمة false لتوقيف تشغيل الدالة
if (/* شرطك الخاص */) {
  isActive = false;
}

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

بالتوفيق إن شاء الله.

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

التابع removeEventListener يتم تطبيقه على نفس عنصر HTML DOM الذي تم تطبيق addEventListener عليه (في حالتك يسمى cartSearcher) و تستقبل وسيطين: الدالّة التي يجب تعطيلها، واسم الحدث الذي يجب تعطيلها منه.

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

إليك هذا المثال الذي يطبّق كل هذا الكلام الذي قلته:

أوّلا، تعريف الدالة بالاسم:

function addRemoveClasses() {
    let userInput = cartSearcher.value;
    cartProNames.forEach(element => {
        if (element.innerHTML.includes(userInput)) {
            element.parentNode.parentNode.classList.remove("d-none");
        } else {
            element.parentNode.parentNode.classList.add("d-none");
        }
    })
}

ثانيا، إضافتها عن طريق addEventListener:

cartSearcher.addEventListener('input', addRemoveClasses);

وأخيرا، إلغاء تفعيل الدالّة عند حدوث شرط محدد. لا أدري ما هو الشرط الذي تريده، لكن سأفترض أننا نريد إيقاف تشغيل هذه الدالّة بعد 10 ثواني من تشغيل السكربت. يمكننا القيام بذلك عن طريق الشفرة التالية:

setTimeout(
  () => { cartSearcher.removeEventListener('input', addRemoveClasses); },
  10000
 )

للمزيد من المعلومات يمكن الاطلاع على توثيق removeEventListener و setTimeout على شبكة موزيلا للمطورين:

يمكنك حذف الحدث من خلال removeEventListener عند تحقق الشرط ومثال على ذلك

const inputHandler = () => {
    let userInput = cartSearcher.value;
    cartProNames.forEach(element => {
        if (element.innerHTML.includes(userInput)) {
            element.parentNode.parentNode.classList.remove("d-none");
            // إذا تم تحقيق الشرط المعين، قم بإزالة الحدث
            if (/* هنا يأتي الشرط الذي تريد أن يؤدي إلى إيقاف تشغيل الدالة */) {
                cartSearcher.removeEventListener('input', inputHandler);
            }
        } else {
            element.parentNode.parentNode.classList.add("d-none");
        }
    });
};
// إضافة الحدث والدالة الرئيسية له
cartSearcher.addEventListener('input', inputHandler);

يمكنك التعديل على المثال السابق ليناسب الموقع وما تريده

يمكنك ازالة المستمع للحدث بعد الوصول للشرط باستخدام removeEventListener، إليك مثالا:

cartSearcher.addEventListener('input', () => {
    let userInput = cartSearcher.value;
    cartProNames.forEach(element => {
        if (element.innerHTML.includes(userInput)) {
            element.parentNode.parentNode.classList.remove("d-none");
            cartSearcher.removeEventListener('input');
        } else {
            element.parentNode.parentNode.classList.add("d-none");
        }
    });
});