2021-04-14

Wir hatten ja gerade Event-Listener-APIs. Da gibt’s noch mehr:

Will man viele Handler auf einmal entfernen, kann man das auch über einen AbortController machen:

const controller = new AbortController();

element1.addEventListener("click", () => {}, {
    signal: controller.signal,
});
element2.addEventListener("click", () => {}, {
    signal: controller.signal,
});
element3.addEventListener("click", () => {}, {
    signal: controller.signal,
});

// Alle Handler entfernen
controller.abort();

Was mir an der Lösung so schön gefällt, ist, dass man kein removeEventListener braucht. Genauer gesagt: Man muss die Lambdas nicht in Variablen auslagern, damit man sie dann removeEventListener wieder übergeben kann.

Der AbortController ist sowas ähnliches wie die CancellationTokenSource und das AbortSignal sowas wie das CancellationToken aus .NET.

Man kann den AbortController auch nutzen, um einen fetch-Request abzubrechen:

fetch(url, {
    signal: controller.signal,
});

Besonders toll finde ich, dass man damit mehrere Aktionen gleichzeitig abbrechen kann.

Leider ist das ganze API-spezifisch. Also man kann nicht generell Promises damit abbrechen. Dafür gab es mal ein Proposal und ein wenig später noch eins, das auch nicht mehr so aktiv ist.

MDN-links:

Ein Blog