Using AbortController as an Alternative for Removing Event Listeners

Since its introduction in 2017, AbortController has provided a powerful mechanism for canceling fetch() requests. This capability extends beyond simple API calls, offering elegant solutions for managing event listeners, particularly in scenarios like drag-and-drop interactions.

A straightforward example demonstrates canceling a fetch() request:

const controller = new AbortController();
const res = fetch('/', { signal: controller.signal });
controller.abort();
console.log(res); // => Promise(rejected): "DOMException: The user aborted a request"

AbortController also improves timeout handling, providing a cleaner alternative to setTimeout:

function timeout(duration, signal) {
  return new Promise((resolve, reject) => {
    const handle = setTimeout(resolve, duration);
    signal?.addEventListener('abort', () => {
      clearTimeout(handle);
      reject(new Error('aborted'));
    });
  });
}

// Usage
const controller = new AbortController();
const promise = timeout(10000, controller.signal);
controller.abort();
console.log(promise); // => Promise(rejected): "Error: aborted"

The significant advancement, however, lies in Chrome 88's support for AbortSignal within addEventListener. This allows for a streamlined approach to removing multiple event listeners simultaneously, replacing the need for multiple removeEventListener calls.

Consider a drag-and-drop example. Previously, managing mousedown, mousemove, and mouseup events required explicit removal using removeEventListener:

// Using removeEventListener
el.addEventListener('mousedown', e => {
  if (e.buttons !== 1) return;

  const onMousemove = e => {
    if (e.buttons !== 1) return;
    /* work */
  };

  const onMouseup = e => {
    if (e.buttons & 1) return;
    window.removeEventListener('mousemove', onMousemove);
    window.removeEventListener('mouseup', onMouseup);
  };

  window.addEventListener('mousemove', onMousemove);
  window.addEventListener('mouseup', onMouseup);
});

With AbortController, a single abort() call cleanly removes all associated listeners:

// Using AbortController
el.addEventListener('mousedown', e => {
  if (e.buttons !== 1) return;

  const controller = new AbortController();

  window.addEventListener('mousemove', e => {
    if (e.buttons !== 1) return;
    /* work */
  }, { signal: controller.signal });

  window.addEventListener('mouseup', e => {
    if (e.buttons & 1) return;
    controller.abort();
  }, { signal: controller.signal });
});

Currently, only Chrome 88 fully supports this AbortSignal integration with addEventListener. While other browsers support AbortController, this specific feature is not yet widely implemented. A polyfill is available for broader compatibility.

The above is the detailed content of Using AbortController as an Alternative for Removing Event Listeners. For more information, please follow other related articles on the PHP Chinese website!