← Tous les articles

Tutoriels

« Exécuter le JS une seule fois » — des scripts sans effets de bord sur les SPA

Sur les pages de type application monopage (SPA), JustZix ré-exécute le JavaScript d'un jeu de règles après chaque changement d'adresse — pour que la règle traite la vue fraîchement rendue. Pour la plupart des scripts, c'est une bonne chose. Mais pour les scripts ayant des effets de bord globaux, cela entraîne une accumulation. La nouvelle option « Exécuter le JS une seule fois » résout ce problème.

Le problème : un script qui s'exécute encore et encore

Une SPA change le contenu sans recharger le document. JustZix détecte une telle navigation et exécute à nouveau le JS du jeu de règles pour que la règle agisse sur la nouvelle vue. Mais si le script ajoute un écouteur d'événements, programme un intervalle (setInterval) ou « enveloppe » une fonction de la page (comme window.fetch ou dataLayer.push), chaque ré-exécution ajoute une copie supplémentaire. Après quelques transitions, vous avez cinq écouteurs identiques, cinq intervalles parallèles et une fonction enveloppée cinq fois de suite.

La solution : la case « Exécuter le JS une seule fois »

L'onglet JavaScript de l'éditeur de jeu de règles dispose maintenant d'un champ « Exécuter le JS une seule fois » (désactivé par défaut — rien ne change pour les jeux de règles existants). Coché — le JS du jeu de règles s'exécute une seule fois par durée de vie du document. La navigation SPA, un changement de #hash et le bouton Précédent ne le relancent plus. Un rechargement complet de la page donne toujours un nouveau départ.

Quand la cocher

Activez « Exécuter le JS une seule fois » pour les scripts qui :

Quand la laisser désactivée

Laissez l'option désactivée pour les scripts censés réagir à chaque sous-vue de la SPA — par exemple ceux qui, à chaque fois, recherchent des éléments fraîchement rendus et font quelque chose avec eux. Si votre script est idempotent (sûr à exécuter plusieurs fois), vous n'avez pas non plus besoin de changer quoi que ce soit.

Bonne pratique : du code idempotent

Indépendamment de cette option, il vaut la peine d'écrire des scripts résistants à la ré-exécution. Un schéma simple est un garde qui interrompt le script s'il s'est déjà exécuté une fois :

// Garde : n'exécuter la logique qu'une seule fois par document
if (!window.__jzMyScript) {
  window.__jzMyScript = true;
  document.addEventListener('keydown', onKey);
}

L'option « Exécuter le JS une seule fois » et un garde dans le code sont deux couches de la même protection — vous pouvez utiliser les deux à la fois.

Installez JustZix et écrivez des scripts qui fonctionnent sur les SPA sans accumulation d'effets de bord.

Notez cet article

Aucune note — soyez le premier.

Essayez vous-même

Installez JustZix et collez n'importe quel snippet de cet article. Deux minutes de zéro à une règle fonctionnelle sur tous vos appareils.

Obtenir JustZix

Fonctionnalités · Comment ça marche · Exemples · Cas d'usage