„JS einmal ausführen“ — nebenwirkungsfreie Skripte auf SPA-Seiten
Auf Single-Page-Application-Seiten (SPA) führt JustZix das JavaScript eines Regelsatzes nach jeder Adressänderung erneut aus — damit die Regel die frisch gerenderte Ansicht verarbeitet. Für die meisten Skripte ist das gut. Aber für Skripte mit globalen Nebenwirkungen führt das zu einer Anhäufung. Die neue Option „JS einmal ausführen“ löst das.
Das Problem: ein Skript, das immer wieder läuft
Eine SPA ändert den Inhalt, ohne das Dokument neu zu laden. JustZix erkennt eine solche Navigation und führt das JS des Regelsatzes erneut aus, damit die Regel auf der neuen Ansicht funktioniert. Aber wenn das Skript einen Event-Listener hinzufügt, ein Intervall setzt (setInterval) oder eine Seitenfunktion „umhüllt“ (etwa window.fetch oder dataLayer.push), fügt jeder erneute Lauf eine weitere Kopie hinzu. Nach ein paar Übergängen haben Sie fünf identische Listener, fünf parallele Intervalle und eine fünffach umhüllte Funktion.
Die Lösung: das Kontrollkästchen „JS einmal ausführen“
Der JavaScript-Tab des Regelsatz-Editors hat jetzt ein Feld „JS einmal ausführen“ (standardmäßig aus — für bestehende Regelsätze ändert sich nichts). Aktiviert — das JS des Regelsatzes läuft einmal pro Dokumentlebensdauer. SPA-Navigation, eine #hash-Änderung und die Zurück-Schaltfläche führen es nicht mehr erneut aus. Ein vollständiges Neuladen der Seite gibt immer einen frischen Start.
Wann Sie es aktivieren sollten
Schalten Sie „JS einmal ausführen“ für Skripte ein, die:
- globale Listener hinzufügen (
addEventListeneraufdocumentoderwindow), - Intervalle oder Timeouts setzen,
- das
window-Objekt verändern oder eingebaute Funktionen umhüllen, - einen Observer einrichten (
MutationObserver), der spätere Ansichten ohnehin von selbst erfasst.
Wann Sie es aus lassen sollten
Lassen Sie die Option aus für Skripte, die auf jede SPA-Unteransicht reagieren sollen — zum Beispiel solche, die jedes Mal frisch gerenderte Elemente finden und etwas mit ihnen tun. Wenn Ihr Skript idempotent ist (sicher mehrfach ausführbar), müssen Sie ebenfalls nichts ändern.
Gute Praxis: idempotenter Code
Unabhängig von dieser Option lohnt es sich, Skripte zu schreiben, die gegen erneutes Ausführen widerstandsfähig sind. Ein einfaches Muster ist ein Wächter, der das Skript abbricht, wenn es bereits einmal gelaufen ist:
// Wächter: die Logik nur einmal pro Dokument ausführen
if (!window.__jzMyScript) {
window.__jzMyScript = true;
document.addEventListener('keydown', onKey);
}
Die Option „JS einmal ausführen“ und ein Wächter im Code sind zwei Schichten desselben Schutzes — Sie können beide gleichzeitig nutzen.
Installieren Sie JustZix und schreiben Sie Skripte, die auf SPAs funktionieren, ohne dass sich Nebenwirkungen anhäufen.
Bewerte diesen Beitrag
Noch keine Bewertungen — sei der Erste.