AbortController

Give your event listeners one signal and a single abort call removes all of them at once.

#javascript #small-print

---

Pretty much everybody meets this as fetch cancellation.

listeners.js

const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort();

JavaScript

Which is useful, mostly for a search-as-you-type box where the response to the third keystroke can land after the response to the fourth and put stale results on screen.

But for years I didn’t know that addEventListener takes the same signal.

listeners.js

const controller = new AbortController();
const { signal } = controller;

JavaScript

listeners.js

el.addEventListener('pointermove', onMove, { signal });
window.addEventListener('resize', onResize, { signal });
document.addEventListener('keydown', onKey, { signal });

JavaScript

listeners.js

controller.abort();

JavaScript

All three are gone. No keeping a reference to each handler, no matching removeEventListener calls with exactly the same function identity and exactly the same options object. Getting that match wrong is probably the bug I’ve written more times than any other in this area. Say you pass an arrow function to both. The removal silently matches nothing and the listener lives on in perpetuity.

It’s particularly good for anything with a lifecycle: a drag that attaches three listeners on pointerdown and needs all of them gone on pointerup, a component teardown, a modal.

AbortSignal.timeout(5000) gives you a signal that aborts itself. That covers “give up after five seconds” without a setTimeout to manage alongside it.