AbortController: أزل مستمعي أحداث المكوّن بإشارة واحدة

الخلاصة السريعة

اربط زري التجربة بإشارة واحدة

مرّر الإشارة نفسها في خيار signal لكل مستمع يخص دورة المكوّن الحالية. [1]

ضع HTML أولًا، ثم JavaScript داخل script بعده. يزيد الزر الأول عدّادًا، ويستدعي الثاني الإلغاء. كلا التسجيلين يستقبل options نفسها. [1]

انقر «زيادة» مرتين لتقرأ 2، ثم اضغط «إيقاف المجموعة». يبقي المثال الأزرار ظاهرة لتختبرها بعد إزالة المستمعين. [1]

مرّر الشيفرة أفقيًا عند الحاجة.

<button id="add" type="button">زيادة</button>
<button id="finish" type="button">إيقاف المجموعة</button>
<p id="result">0</p>

مرّر الشيفرة أفقيًا عند الحاجة.

const add = document.querySelector("#add");
const finish = document.querySelector("#finish");
const result = document.querySelector("#result");
let total = 0;
function mount() {
  const controller = new AbortController();
  const options = { signal: controller.signal };
  add.addEventListener("click", () => {
    result.textContent = ++total;
  }, options);
  finish.addEventListener("click", () => {
    controller.abort();
    result.textContent = "توقفت المجموعة";
  }, options);
  return controller;
}
let active = mount();

افحص ما توقف وما بقي

ينزع abort المستمعين المرتبطين بالإشارة؛ لا يمس مستمعًا مستقلًا عنها. [2]

بعد الإيقاف، انقر الزرين مجددًا؛ يجب أن تبقى رسالة التوقف. الإلغاء يزيل تسجيلات هذه الإشارة، ولا يزيل العنصر نفسه. وإذا ربطت مستمعًا آخر دونها فسيستمر. [2]

ابدأ بإشارة جديدة عند العودة

الإشارة المُلغاة لا تقبل تسجيل مستمع جديد؛ أنشئ متحكمًا جديدًا عند إعادة التهيئة. [2]

لا تعِد تمرير active.signal بعد الإلغاء؛ يتوقف التسجيل عند اكتشاف إشارة ملغاة. لإعادة التهيئة، نفّذ السطرين أدناه في وحدة التحكم: ينهي الأول المجموعة السابقة، وينشئ الثاني مجموعة جديدة. يبقى total محفوظًا لأننا لم نعده إلى الصفر. [2]

بعدهما، نقرة «زيادة» واحدة تعرض 3 إذا اتبعت التجربة السابقة؛ لا تحتاج إعادة تحميل الصفحة. [2]

مرّر الشيفرة أفقيًا عند الحاجة.

active.abort();
active = mount();

اختر الإزالة اليدوية عند الحاجة

الإزالة اليدوية تحتاج نوع الحدث ومرجع الدالة وقيمة capture المطابقة للتسجيل. [3]

إذا أردت إزالة تسجيل واحد، يمكنك استعمال removeEventListener على العنصر نفسه مع نوع الحدث والدالة المحفوظة. عند التسجيل باستخدام capture بقيمة true، لا تكفي إزالته بقيمة false. وإذا سجلت الدالة في الطورين، فإزالة أحدهما لا تزيل الآخر. [3]

أما الإشارة المشتركة فتجمع التسجيلات التي تمررها إليها في خطوة إلغاء واحدة. حدّد المجموعة عند إنشاء المكوّن، ولا تتعامل مع abort على أنه أمر عام لمسح أحداث الصفحة كلها. [3]