Javascript va trop vite pour récup les données AJAX

[L'Omniscient]

Bonjour,
Alors voilà, j'ai un petit soucis.

J'ai un code Javascript qui se divise en deux branches selon la faction du joueur.
Première branche, code basique, pas de soucis, le code s'exécute.
Deuxième branche, avant le code basique, une fonction récupère en AJAX une information qui, selon son résultat, transforme le code.

Le problème avec cette deuxième branche, c'est que le code Javascript semble aller trop vite pour prendre en compte la donnée AJAX. Chose étrange, si j'essaie d'afficher le contenu dans un alert, il m'affiche le bon contenu dans le alert, mais le code n'a pas eu le temps d'intégrer ce contenu. (D'ailleurs, la console web m'affiche que la variable n'existe pas malgré que le alert l'affiche).
En effectuant une deuxième fois cette branche, le code s'affiche correctement, puisque la première exécution a eu le temps de s'enregistrer.

Pour pallier à ce problème, j'ai fais s'exécuter ma fonction une première fois à l'ouverture du jeu. Mais mon code est sensé pouvoir s'effectuer un maximum de X fois (6 par exemple). Sauf que bien sûr, comme l'AJAX n'arrive pas au moment où il est sensé arriver, le code va s'effectuer 7 fois avant de ne plus pouvoir s'effectuer (il s'effectuerait bien 6 fois si je ne l'activais pas une première fois au lancement du jeu, mais avant un tour de retard...)

J'aimerais demander à mon code d'attendre qu'il enregistre la donnée AJAX avant de poursuivre. Y-a-t-il un moyen ?

Code :

function infos_baguette() {
        if (faction == "Fée") {
            search = "search";
            $.ajax({
                url : 'AJAX.php',
                type : 'POST',
                data : 'infos_baguette='+search,
                dataType : 'text',
                error : function(){
                    disconnect();
                },
                success : function(info_baguettes) {
                    decrypt_baguette_active = JSON.parse(info_baguettes);
                    baguette_active = decrypt_baguette_active['nom'];
                },
            });    
        }
    }

function explorer_region(){
        infos_baguette();
        nom_regions();
        /* Affiche les différents cadres d'exploration */
        document.getElementById('ressourcesA').style.display = "block";
        document.getElementById('ressources').style.display = "block";
        document.getElementById('type').style.display = "block";
        document.getElementById('typeA').style.display = "block";
        document.getElementById('recuperation').style.display = "none";    
        effacement_pointCardinaux();
    }

Il s'agit de la donnée baguette_active qui a un tour de retard avant d'être prise en compte par le code. (Et même en mettant mon code dans le success après la définition de la variable "baguette_active" l'intégration est trop lente). J'ai bien un moyen de réduire le nombre d'utilisations totales pour pallier à ce problème, mais vu que cette quantité (6) s'étend sur plusieurs sessions, j'ai peur que ça me fasse un truc comme ça :
- Doit s'arrêter à 5 au lieu de 6
- Utilisation n°0 (1)
- Utilisation n°1 (2)
- Utilisation n°2 (3)
- Fin, résultat = 6 - 3 = 3, reste 3 actions
- Nouvelle utilisation n°0 (4)
- Nouvelle utilisation n°1 (5)
- Ne peut plus être utilisé, il y a eu 5 utilisations au lieu de 6...
Le casse-tête u_u

[Vincent G]

En JS, tu dois raisonner en callback ou promesses.

Function 1 > Function 2, etc.

Code :

function infos_baguette(callback) {
        if (faction == "Fée") {
            search = "search";
            $.ajax({
                url : 'AJAX.php',
                type : 'POST',
                data : 'infos_baguette='+search,
                dataType : 'text',
                error : function(){
                    disconnect();
                },
                success : function(info_baguettes) {
                    decrypt_baguette_active = JSON.parse(info_baguettes);
                    baguette_active = decrypt_baguette_active['nom'];
                    return callback(true);
                },
            });    
        }
    }

function explorer_region(){
    infos_baguette(function(callback){
        nom_regions();
        /* Affiche les différents cadres d'exploration */
        document.getElementById('ressourcesA').style.display = "block";
        document.getElementById('ressources').style.display = "block";
        document.getElementById('type').style.display = "block";
        document.getElementById('typeA').style.display = "block";
        document.getElementById('recuperation').style.display = "none";    
        effacement_pointCardinaux();
    });
}

[Ter Rowan]

Asynchrone JAX :

tu dois développer en fonction de quand revient le message, pas comme la suite séquentielle (d'où le call back présenté plus haut).

Attention aussi, comme c'est assynchrone, tu peux très bien te retrouver avec dans l'ordre :

J'envoie requête ajax message A
J'envoie requête ajax message B
Je reçois réponse ajax à message B
Je reçois réponse ajax à message A

oui mais euh je voulais A d'abord moi :'(

pense à tout cela si tu développes ton code avec plusieurs appels ajax qui ne s'attendent pas

[Dioux]

Oui, jettes donc un œil aux promesses

https://api.jquery.com/deferred.promise/

[L'Omniscient]

Wha, je ne comprenais pas ce que ça impliquait l'asynchrone, je rentre plus en profondeur dans les mystères du JavaScript :o

Ce genre de configuration n'intervient qu'avec l'Ajax ou peut intervenir dans du JS seul ?

Merci pour vos messages, je vais regarder et essayer ça

D'ailleurs, pourquoi l'Ajax est asynchrone ?

[Argorate]

NodeJS est asynchrone aussi. C'est une force. Une fois que tu en auras l'habitude, tu comprendras que c'est génial événementiel
Et oui en JS classique tu peux faire pareil, les callback sont présent partout...

[Xenos]

Ca peut intervenir dans du JS seul. JS est, de base, structuré de manière asynchrone car basé sur les évènements (grosso modo). Pour autant il ne s'exécute que dans un seul thread (ça fait paradoxal, mais bon). D'où le fait que toutes les méthodes synchrones se font peu à peu dégager (une méthode synchrone bloquante va freezer le thread JS, et le reste du JS poireautera). D'où le fait que l'AJAX (XMLHttpRequest en fait) synchrone est déprécié: une version synchrone freeze le JS pendant la durée de la requête.

PS: les callback finissent par être remplacées par les promises, cf "then" et compagnie (j'ai la flemme d'aller le chercher, tu trouveras ça sur le Mozilla Developer Network)

[niahoo]

C'est une force. 

Bof ...

Désolé d'être relou avec ça mais avec Elixir tu fais mille trucs asynchrones et tu peux tranquillement attendre le résultat sans avoir besoin de callbacks ou de promises.

Le fait que ce langage monothread soit le seul disponible dans un truc aussi concurrent qu'une page web est une vaste blague. Alors bon oui, du coup c'est plus facile à concevoir les programmes quand on ne gère pas la concurrence. Mais dire que c'est une force c'est un peu exagéré.

[Xenos]

C'est pour cela qu'il faut s'adapter au paradigme du langage qu'on choisit. Tu ne codes pas sur Elixir comme sur JS, et pas sur JS comme sur PHP (ce que t'avais l'air de faire, Omniscient)

[niahoo]

Ouaip. Heureusement en javascript ça avance bien et on commence à virer l'héritage du C++/Java principalement dû à la syntaxe.

Là l'Omniscient (ahem...) tu vas devoir exécuter la suite de ton code dans la fonction success et pas en dessous de l'appel à $.ajax, tout simplement. Pas besoin de promesses a priori.