AbortController: el interruptor maestro de tus listeners

Cada listener que conectas queda vivo hasta que alguien lo desconecte. En una página simple nunca lo notas; en una app donde secciones aparecen y desaparecen, los listeners huérfanos se acumulan: reaccionan cuando ya no deben y reman contra la memoria. Hoy aprendes la forma moderna de apagarlos en bloque: AbortController.

El problema: desconectar es incómodo

La lección 1 dejó las dos condiciones de removeEventListener: necesitas LA MISMA referencia de función (nada de flechas anónimas) y una llamada POR CADA listener. Un modo de edición que conecta cinco listeners exige guardar cinco funciones con nombre y escribir cinco desconexiones — y con que olvides una, ya tienes un fantasma respondiendo a destiempo.

El patrón: signal al conectar, abort para cortar

Haz el ciclo completo: entra al modo, comprueba en la consola que los tres listeners reportan, sal con abort… y comprueba el silencio. Tres detalles del patrón: el signal viaja en el MISMO objeto de opciones donde ya conociste a once; las funciones pueden ser flechas anónimas (ya no necesitas guardarlas — el circuito las conoce); y un controlador abortado no se reutiliza — para volver a entrar al modo se crea uno nuevo (por eso la variable se resetea a null).

¿Cuándo lo vas a usar de verdad?

Nota honesta: en una página como las de este curso, que vive y muere completa, puedes no limpiar jamás y nunca notarlo — el navegador barre todo al salir. El patrón se vuelve vital cuando partes de la interfaz nacen y mueren dentro de la misma página: modales, pestañas, el "modo edición" del ejemplo… y sobre todo en los componentes de React/Angular que montarás en otros supercursos, donde "limpiar al desmontar" es regla de oro y este controlador es la herramienta idiomática. Bonus que verás en el módulo 9: AbortController también cancela peticiones fetch en vuelo — mismo taco, otro circuito.

Mini-reto

Al playground del modo edición: 1) agrégale al circuito un cuarto listener — Escape (keydown + event.key) que llame él mismo a la salida del modo (¿puede un listener del circuito bajar su propio taco? compruébalo); 2) verifica que después de abortar, entrar de nuevo crea un circuito fresco y todo revive; 3) rompe a propósito: conecta uno de los listeners SIN { signal } y observa cómo sobrevive al abort — acabas de fabricar un fantasma, y ahora sabes reconocerlo.

Qué sigue

Módulo casi cerrado: escuchas, delegas, fabricas eventos y los limpias como profesional. Queda la prueba de fuego — el reto integrador: "Mi Bolsillo" INTERACTIVO, con formulario, borrado por delegación y total reactivo. Tu primera aplicación completa de verdad.