définir une priorité dans l'exécution des scripts

[bplc]

Bonjour, 

Je me demander si il y avais une méthode, pour définir la priorité dans l'exécution des scripts ?

Je m'explique, dans mon cas si je créer un seul script, tout fonctionne très biens, JS lis de haut en bas.
Mais quand j'ai plusieurs script, un problème surviens, il ne s'exécute pas dans le bon ordre, cela me créer des problèmes.


Ce que j'aimerais faire : 

le script 1 s'exécute en premier puis le script 2 ...


Bien cordialement ^^

[bplc]

Je viens de trouver ce la :

https://forum.forumactif.com/t383782-ordre-d-execution-des-javascript

Apparemment personne ne sais trop comment faire si j'ai bien compris hormis de le faire dans une seul et même script.

Selon les écrit de Evaliah :

Code:

<script src="machin1.js"></script>

<script src="machin2.js"></script>

serais t'il possible de créer une priorité d'éxécution, en écrivant en dur les URL des scripts comme ci-dessus, directement dans le template du forum ?

[Toryudo]

Bonjour !

La logique du langage JavaScript, c'est de paralléliser les tâches pour pouvoir tout exécuter en même temps ; rien n'est prévu pour certifier que tel ou tel script doit se lancer avant un autre à ma connaissance, mis à part de mettre les instructions les unes à la suite des autres.

On peut néanmoins toujours bricoler quelque chose en fonction des scripts, si vous savez ce qu'ils font, si vous pouvez les modifier, etc. On pourrait imaginer une sorte de token, une variable contenant un chiffre qui correspond à l'ordre des scripts, et qui est mise à jour par les scripts lorsque ceux-ci sont arrivés au bout de leur exécution. On crée donc la variable globale suivante avant l'ajout des scripts :

Code:

<script type="text/javascript">
   ordreScript = 1;
</script>
<script src="machin1.js"></script>
<script src="machin2.js"></script>

Ensuite, on bricole les scripts de machin1.js et machin2.js pour ajouter le fonctionnement suivant : on attend 100ms avant de vérifier la valeur de ordreScript. Pour le script machin1.js, si la valeur de ordreScript est égale à 1 (ce qui sera toujours vrai dans notre cas, puisqu'on a initialisé ordreScript avec la valeur 1), alors on peut exécuter le code :

Code:

var attentePremierScript = setInterval(function (){
  if (ordreScript == 1){
    // Mon code ici
    ordreScript = 2;
    clearInterval(attentePremierScript);
  }
}, 100);

// Mon code ici va ici correspondre au script machin1.js que vous aviez à la base.
Après votre code, ce script exemple passe la valeur de ordreScript à 2 et supprime le setInterval qui permettait de vérifier toutes les 100ms si le script pouvait s'exécuter.
Maintenant, le cas de machin2.js :

Code:

var attenteDeuxiemeScript = setInterval(function (){
  if (ordreScript == 2){
    // Mon code ici
    ordreScript = 3;
    clearInterval(attenteDeuxiemeScript);
  }
}, 100);

Ce script vérifie toutes les 100ms si ordreScript est égal à 2... ce qui ne sera vrai que quand machin1.js sera terminé, puisque c'est lui qui va mettre ordreScript = 2 en fin de code. Vous pouvez répéter la même chose avec un machin3.js, machin4.js, jusqu'au nombre que vous voudrez. Les valeurs à changer à chaque fois sont les suivantes :

var attenteDeuxiemeScript => différent pour chaque script, répété dans le clearInterval(attenteDeuxiemeScript);
if (ordreScript == 2){ => à modifier avec le numéro d'exécution du script
ordreScript = 3; => à modifier avec le numéro du script suivant (presque toujours ordreScript + 1 donc si on veut garder cette logique)

Voilà comment vous pourrez vous débrouiller !

[bplc]

Je comprend le principe, je n'arrive pas encore a le faire fonctionner mais je le garde de coté ^^

Imaginons que je veux faire un visibility hidden,
je sais que je n'ai pas besoin de votre méthode pour cette exemple ,mais c'est pour mieux comprendre ou intégrer les éléments.

• Je créer mon premier script comme ceci :
  

Code:

var attentePremierScript = setInterval(function (){
  if (ordreScript == 1){
 
$("adress-css").css("visibility","hidden"); //içi mon code

    ordreScript = 2;
    clearInterval(attentePremierScript);
  }
}, 100);

• Et je créer mon deuxième code comme ceci :
  

Code:

var attenteDeuxiemeScript = setInterval(function (){
  if (ordreScript == 2){
  
Var mariable 1
Mes conditions
...

    ordreScript = 3;
    clearInterval(attenteDeuxiemeScript);
  }
}, 100);

Mes variable sont elle bien placé ?
Je doit rajouter  $(function() {  }); ??

Je n'ai pas bien compris doit-je modifier le template pour y rajouter ceci :

Code:

<script type="text/javascript">
   ordreScript = 1;
</script>
<script src="machin1.js"></script>
<script src="machin2.js"></script>

[Toryudo]

Alors je n'avais pas pensé à ça, mais si vous mettez du jQuery plutôt que du JavaScript natif, on va avoir une difficulté supplémentaire... parce que quand vous écrivez ce genre de chose :

Code:

$("adress-css").css("visibility","hidden");
ordreScript = 2;

... naturellement, le jQuery parallélise aussi les tâches, c'est-à-dire qu'il est possible qu'il n'attende pas d'avoir terminé la première ligne avant d’exécuter la deuxième. Ça va vraiment dépendre des instructions qui sont écrites dans les scripts... ça rajoutera donc d'éventuelles difficultés supplémentaires, mais soit, on pourra là encore trouver des solutions.

Mes variable sont elle bien placé ?
Je doit rajouter  $(function() {  }); ??

Je n'ai pas bien compris doit-je modifier le template pour y rajouter ceci :

Code:

<script type="text/javascript">
   ordreScript = 1;
</script>
<script src="machin1.js"></script>
<script src="machin2.js"></script>

Les variables sont biens placées. Si vous avez besoin de rajouter $(function() {  });, vous pouvez le faire comme ceci :

Code:

$(function() {
      var attentePremierScript = setInterval(function (){
      if (ordreScript == 1){
        // Mon code ici
        ordreScript = 2;
        clearInterval(attentePremierScript);
      }
    }, 100);
});

Enfin, tout dépend de comment vous incluez les scripts. Je suis parti du principe que vous les ajoutiez comme vous le disiez dans votre deuxième message, en écrivant des balises <script> dans un Template, donc dans ce cas, il faut effectivement rajouter une balise juste avant pour déclarer une variable globale utilisable dans les deux scripts :

Code:

<script type="text/javascript">
   ordreScript = 1;
</script>

Vous pouvez ajouter cette déclaration où vous voulez dans un Template, oui... donc le overall_header, dans le overall_footer_begin ou dans le overall_footer_end, un Template commun à toutes les pages pour être tranquille. Si vous pensez plutôt passer par des scripts ajoutés via la page "Gestion des codes Javascript", il faudra ajouter cette déclarations dans un des scripts ou dans le overall_header avant <script src="{JQUERY_PATH}" type="text/javascript"></script> par exemple, ça devrait suffire !

[bplc]

J'ai commencé a apprendre le JS hier donc, je vais vous répondre OK   

j'ai actuellement deux script,

• le premier injecte une classe CSS qui fait un display : none
  
• et un deuxième qui sous certaine condition affiche l'élément voulu du display
  

Le soucis est que le display du premier script s'exécute après mon deuxième script d'ou le problème.


J'ai eu la logique de tester dans un seul script pour identifier le problème.

Je n'ai aucune préférence pour le jQuery  ou le  JavaScript natif, j'ai d'ailleurs beaucoup de mal a comprendre la structure du JS, dû aux multiples mise en forme qu'il propose. 

Ma confusion est t'elle que pour moi :

• $("") = jQuery
  
• document.Selector("")= JS natif
  

(un baground-color deviens un baground / un " deviens un ' / les MAJ ... bref c'est pas la fête pour un newbie comme moi)
Je n'ai pas cherché plus loins pour l'instant ^^


Pour éviter de vous faire perdre trop de temp, je vais marquer ce sujet comme Résolu, et je vais attendre d'avoir finalisé mes scripts pour tester votre méthode, et ainsi éviter les faux positif dû a des erreurs que j'aurais pu commettre. 

Une fois finis si je rencontre des problématiques de mise en place, j'ouvrirais un autre sujet. 

Je vous remercie vous avais fait un superbe travail  

[chattigre]

Coucou par ici ^^

j'ai actuellement deux script,

• le premier injecte une classe CSS qui fait un display : none
  
• et un deuxième qui sous certaine condition affiche l'élément voulu du display
  

Dans un cas pareil, mieux vaut éviter
Normalement, si les deux lignes de JS sont l'une après l'autre dans un même script ça devrait aller sans compteur quelconque.
Et puis si le display: none; au départ est systématique pour une classe, mieux vaut le mettre dans le CSS, et ainsi pas besoin de JS

Créer plusieurs scripts est utile quand il concerne deux choses différentes, sinon autant en faire un seul pour éviter justement ce souci de priorité.

Bonne journée

[bplc]

Tu as raison, je me complique peut être la vie ^^
Par contre j'injecte une class qui contient le display, du coup cela créer le même problème.

[chattigre]

Re,
Si je prends l'exemple des traductions :

Code:

<p class="fa-translate fa-translate-fr">Texte en Français</p>
<p class="fa translate fa-translate-en">Text in English</p>

CSS :

Code:

.fa_translate {
  display: none;
}
.fa_translate.fa_translate_fr /*Langue par défaut si JS désactivé ou pas traduit*/ {
  display: initial;
}

JS :

Code:

if($(".fa_translate_"+_userdata["user_lang"])) { //Si il existe un texte dans cette langue sur la page
  $(".fa_translate_fr").hide(); //On masque la langue par défaut
  $(".fa_translate_"+_userdata["user_lang"]).show(); //On montre la langue utilisateur
}


Et ça suffit pour ne montrer que le texte dans la langue de l'utilisateur, ou le Français si la langue est indisponible ou que le JS est désactivé.

Bonne soirée

[bplc]

Je note, je note