Menggunakan AbortController sebagai alternatif untuk mengeluarkan pendengar acara

Sejak pengenalannya pada tahun 2017, AbortController telah menyediakan mekanisme yang kuat untuk membatalkan permintaan fetch() . Keupayaan ini melangkaui panggilan API yang mudah, menawarkan penyelesaian yang elegan untuk mengurus pendengar acara, terutamanya dalam senario seperti interaksi drag-and-drop.

Contoh mudah menunjukkan membatalkan fetch() permintaan:

 const controller = new AbortController ();
const res = empet ('/', {signal: controller.signal});
controller.abort ();
console.log (res); // => Janji (ditolak): "DomException: Pengguna menggugurkan permintaan"

AbortController juga meningkatkan pengendalian masa tamat, menyediakan alternatif yang lebih bersih kepada setTimeout :

 Timeout fungsi (tempoh, isyarat) {
  Kembalikan janji baru ((menyelesaikan, menolak) => {
    const handle = setTimeout (resolve, duration);
    isyarat? .AdDeventListener ('abort', () => {
      clearTimeout (mengendalikan);
      menolak (ralat baru ('dibatalkan'));
    });
  });
}

// Penggunaan
const controller = new AbortController ();
const promise = timeout (10000, controller.signal);
controller.abort ();
console.log (janji); // => Janji (ditolak): "Ralat: Dipusingkan"

Walau bagaimanapun, kemajuan yang ketara terletak pada sokongan Chrome 88 untuk AbortSignal dalam addEventListener . Ini membolehkan pendekatan yang diperkemas untuk menghapuskan pelbagai pendengar acara secara serentak, menggantikan keperluan untuk pelbagai panggilan removeEventListener .

Pertimbangkan contoh drag-and-drop. Sebelum ini, menguruskan peristiwa mousedown , mousemove , dan mouseup memerlukan penyingkiran eksplisit menggunakan removeEventListener :

 // Menggunakan RoveEventListener
el.addeventListener ('mousedown', e => {
  jika (e.buttons! == 1) kembali;

  const onMouseMove = e => {
    jika (e.buttons! == 1) kembali;
    / * kerja */
  };

  const onmouseup = e => {
    jika (E.Buttons & 1) kembali;
    window.removeEventListener ('mousemove', onMouseMove);
    window.removeEventListener ('mouseup', onMouseUp);
  };

  window.addeventListener ('mousemove', onMouseMove);
  window.addeventListener ('mouseup', onMouseUp);
});

Dengan AbortController , satu abort() panggilan bersih menghilangkan semua pendengar yang berkaitan:

 // Menggunakan AbortController
el.addeventListener ('mousedown', e => {
  jika (e.buttons! == 1) kembali;

  const controller = new AbortController ();

  window.addeventListener ('mousemove', e => {
    jika (e.buttons! == 1) kembali;
    / * kerja */
  }, {signal: controller.signal});

  window.addeventListener ('mouseup', e => {
    jika (E.Buttons & 1) kembali;
    controller.abort ();
  }, {signal: controller.signal});
});

Pada masa ini, hanya Chrome 88 sepenuhnya menyokong integrasi AbortSignal ini dengan addEventListener . Walaupun pelayar lain menyokong AbortController , ciri khusus ini belum dilaksanakan secara meluas. Polyfill tersedia untuk keserasian yang lebih luas.

Atas ialah kandungan terperinci Menggunakan AbortController sebagai alternatif untuk mengeluarkan pendengar acara. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!