← Tutti gli articoli

Tutorial

„Esegui JS una sola volta” — script senza effetti collaterali sulle SPA

Sulle pagine di tipo applicazione a pagina singola (SPA), JustZix riesegue il JavaScript di un set di regole dopo ogni cambio di indirizzo — così la regola elabora la vista appena renderizzata. Per la maggior parte degli script va bene. Ma per gli script con effetti collaterali globali ciò porta a un accumulo. La nuova opzione „Esegui JS una sola volta” risolve questo problema.

Il problema: uno script eseguito più e più volte

Una SPA cambia il contenuto senza ricaricare il documento. JustZix rileva questa navigazione e riesegue il JS del set di regole affinché la regola funzioni sulla nuova vista. Ma se lo script aggiunge un listener di eventi, imposta un intervallo (setInterval) o „avvolge” una funzione della pagina (come window.fetch o dataLayer.push), ogni riesecuzione aggiunge un\'altra copia. Dopo alcune transizioni ti ritrovi con cinque listener identici, cinque intervalli paralleli e una funzione avvolta cinque volte.

La soluzione: la casella „Esegui JS una sola volta”

La scheda JavaScript dell\'editor del set di regole ha ora un campo „Esegui JS una sola volta” (disattivato per impostazione predefinita — nulla cambia per i set di regole esistenti). Quando è selezionato, il JS del set di regole viene eseguito una sola volta nell\'arco di vita del documento. La navigazione SPA, un cambio di #hash e il pulsante Indietro non lo eseguono più di nuovo. Un ricaricamento completo della pagina dà sempre un nuovo avvio.

Quando selezionarla

Attiva „Esegui JS una sola volta” per gli script che:

Quando lasciarla disattivata

Lascia l\'opzione disattivata per gli script che devono reagire a ogni sotto-vista SPA — per esempio quelli che ogni volta trovano elementi appena renderizzati e ci fanno qualcosa. Se il tuo script è idempotente (sicuro da eseguire più volte), anche in questo caso non devi cambiare nulla.

Buona pratica: codice idempotente

Indipendentemente da questa opzione, vale la pena scrivere script resistenti alla riesecuzione. Un pattern semplice è una guardia che interrompe lo script se è già stato eseguito una volta:

// Guardia: esegui la logica una sola volta per documento
if (!window.__jzMyScript) {
  window.__jzMyScript = true;
  document.addEventListener('keydown', onKey);
}

L\'opzione „Esegui JS una sola volta” e una guardia nel codice sono due livelli della stessa protezione — puoi usarli entrambi insieme.

Installa JustZix e scrivi script che funzionano sulle SPA senza che gli effetti collaterali si accumulino.

Valuta questo articolo

Nessuna valutazione — sii il primo.

Provalo tu stesso

Installa JustZix e incolla qualsiasi snippet di questo articolo. Due minuti da zero a una regola funzionante su tutti i tuoi dispositivi.

Ottieni JustZix

Funzionalità · Come funziona · Esempi · Casi d'uso