← Todos los artículos

Tutoriales

«Ejecutar JS una sola vez» — scripts sin efectos secundarios en páginas SPA

En las páginas de tipo aplicación de una sola página (SPA), JustZix vuelve a ejecutar el JavaScript de un conjunto de reglas tras cada cambio de dirección — para que la regla procese la vista recién renderizada. Para la mayoría de los scripts eso está bien. Pero para los scripts con efectos secundarios globales conduce a una acumulación. La nueva opción «Ejecutar JS una sola vez» resuelve eso.

El problema: un script que se ejecuta una y otra vez

Una SPA cambia el contenido sin recargar el documento. JustZix detecta esa navegación y vuelve a ejecutar el JS del conjunto de reglas para que la regla funcione en la nueva vista. Pero si el script añade un listener de eventos, establece un intervalo (setInterval) o «envuelve» una función de la página (como window.fetch o dataLayer.push), cada nueva ejecución añade otra copia. Tras unas pocas transiciones tienes cinco listeners idénticos, cinco intervalos en paralelo y una función envuelta cinco veces.

La solución: la casilla «Ejecutar JS una sola vez»

La pestaña JavaScript del editor del conjunto de reglas tiene ahora un campo «Ejecutar JS una sola vez» (desactivado por defecto — no cambia nada en los conjuntos de reglas existentes). Activado — el JS del conjunto de reglas se ejecuta una vez por vida del documento. La navegación SPA, un cambio de #hash y el botón Atrás ya no lo vuelven a ejecutar. Una recarga completa de la página siempre da un nuevo comienzo.

Cuándo activarla

Activa «Ejecutar JS una sola vez» para los scripts que:

Cuándo dejarla desactivada

Deja la opción desactivada para los scripts que deben reaccionar a cada subvista de la SPA — por ejemplo, los que cada vez buscan elementos recién renderizados y hacen algo con ellos. Si tu script es idempotente (seguro de ejecutar muchas veces), tampoco necesitas cambiar nada.

Buena práctica: código idempotente

Al margen de esta opción, conviene escribir scripts resistentes a una nueva ejecución. Un patrón sencillo es un guardián que aborta el script si ya se ejecutó una vez:

// Guardián: ejecuta la lógica solo una vez por documento
if (!window.__jzMyScript) {
  window.__jzMyScript = true;
  document.addEventListener('keydown', onKey);
}

La opción «Ejecutar JS una sola vez» y un guardián en el código son dos capas de la misma protección — puedes usar ambas a la vez.

Instala JustZix y escribe scripts que funcionen en SPA sin que los efectos secundarios se acumulen.

Valora este artículo

Sin valoraciones — sé el primero.

Pruébalo tú mismo

Instala JustZix y pega cualquier snippet de este artículo. Dos minutos de cero a una regla funcionando en todos tus dispositivos.

Obtener JustZix

Funciones · Cómo funciona · Ejemplos · Casos de uso