AbortController (Cancelar eventos)

Cuando manejamos eventos en Javascript como click, keydown, mouseover u otros, estos eventos permanecen activos hasta que la página se recarga o se eliminan mediante un removeEventListener(). Como hemos hablado, si no se gestiona correctamente, podríamos tener problemas de fugas de memoria.

¿Qué es AbortController?

AbortController es una forma generalizada que tiene Javascript de cancelar tareas en grupo, incluyendo listeners de eventos, peticiones fetch(), timeouts y otros mecanismos.

Para utilizarlo tenemos que hacer lo siguiente:

• 1️⃣ Crear un AbortController que actúa como un interruptor apagado/encendido.
• 2️⃣ Generamos una señal signal que se pasará a varios eventos.
• 3️⃣ Llamamos a controller.abort() para cancelar todos los eventos asociados.

Uso de AbortController

Veamos un ejemplo de código para detener un grupo de eventos:

<div class="parent">
  <button>Botón 1</button>
  ...
  <button>Botón 50</button>
</div>

<button class="disable">Detener eventos</button>

<script>
  const controller = new AbortController();
  const { signal } = controller;

  const buttons = document.querySelectorAll(".parent button");
  buttons.forEach(button => {
    button.addEventListener("click", () => {
      alert("Click detectado");
    }, { signal });
  });

  const disableButton = document.querySelector("button.disable");
  disableButton.addEventListener("click", () => controller.abort(), { once: true });
</script>

Analicemos el código:

• 1️⃣ Tenemos un grupo de botones con eventos en escucha.
• 2️⃣ Asociamos una señal signal de nuestro controlador a los listeners.
• 3️⃣ Ejecutamos controller.abort() para cancelar todos los eventos asociados a la señal.

Ventajas

Las ventajas de utilizar AbortController son evidentes, pero aún así es importante recalcar:

• ✅ Evitamos fugas de memoria: Y es más sencillo que usar removeEventListener().
• ✅ Mejor rendimiento: Cuantos menos eventos activos existan, más fluida será la experiencia.
• ✅ Evitar bugs: Si un evento sigue activo cuando no debería podría generar errores inesperados.
• ✅ Más fácil de mantener: El código es más sencillo de entender y modificar.
• ✅ Flexible: Se puede utilizar tanto para eventos, como para fetch() u otros mecanismos.