Arrêter un timer créer avec setTimeout

Version imprimable

Bonsoir, je poursuis le dév de mon jeu et autant la partie php - mysql c'est une promenade de santé autant côté client c'est pas la balade des gens heureux !

Là où je bloque : via raffraichissement AJAX, je teste si ennemis sur la case auquel cas j'ajoute des éléments dans le dom:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function retourAjax_25(data){ 
var tab=data;
    //si pas d'erreur
    if (tab["Erreur"]===1){
    //Compter le nb d'adversaires
        var c = -1;
        for (var Joueur in tab) {
            if (tab.hasOwnProperty(Joueur)) ++c;
        }
 
        //Vider le bloc précédemment créé
        $(".espace_g2").empty();
 
 
        //pour chaque adversaire, afficher avatar, sa vie et son pseudo dans un bloc 
        for (var i = 1; i <= c; i++) {
 
           $(".espace_g2").append("<div class='conteneurAtt' id='ContAtt" + i + "' > </div>");
 
           $("#ContAtt" + i).append(
           		"<img src='" + tab[i]['AvatarJoueur'] + "'class='avatar' height='60' width='60'>"); 
 
           $("#ContAtt" + i).append(
            	"<img src='" + tab[i]['imgEstiVieJoueur'] + "' class='vie' height='60' width='120'>"); 
 
            $("#ContAtt" + i).append("<div>" + tab[i]['PseudoJoueur'] + "</div>"); 
 
            $('#ContAtt' + i).on('click', function(evt) {
                //Désactiver les boutons cliquables par le joueur
                DesactiverBtons();
                //le tps que met le joueur a attaquer est dans un champ hidden
                $toto=$('input#tpsAttaque').val();
 
                setTimeout(function(){
                    alert ("c tipar à l'attaque!");
                }, $toto);
 
                });
 
        }
 
    }

Alors le code fonctionne mais il n'est pas avec les autres fonctions. J'ai un gros timer que j'arrête habituellement quand un timer plus spécifique est enclenché et désormais impossible de l'arrêter.
J'aurais aimé quelque chose comme :

Code:

1
2
3
4
5
6
$('#ContAtt' + i).on('click', UneFonction);
 
function UneFonction(){
//Désactiver timer dans la page principale
//Récupération de ce qui a été cliqué, en déduire le numJoueur et faire un ajax pour dire : tu es parvenu à blesser O/N
}

Alors qu'avec la première manière, j'inclue un ajax dans un ajax... Je suis un peu perdu dans les structures classiques d'agencement de codes.
Pourriez-vous m'éclairer svp?

15/01/2020, 15h14
Toufik83
Salut,

Pour arrêter un timer avec setTimeout tu peux l'identifier avec un id :
Code:

1 2 3 var id = setTimeout(function(){alert("c tipar à l'attaque!");}, $toto); clearTimeout(id);//arrêter le timer
Après je pense que le code du click doit être en dehors de la fonction globale retourAjax_25 et passer par délégation pour attacher l'événement aux conteneurs dynamiques :
Code:

1 2 3 4 5 6 7 function retourAjax_25(data){ //... } $(".espace_g2").on("click",".conteneurAtt",function(e){ //le code que tu veux exécuter .... });

Merci de ta réponse, j'ai effectivement déplacer le code lié au DIV créé et ça fonctionne bien sur le premier aspect: je peux cliquer et l'événement s’exécute.

Pour le second point (le timer global à effectivement arrêter avec clearTimeOut), j'ai des lacunes sur les portées de variables .

Dans la page principale jeu.php, une session php, du html et enfin

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="1_DEPLACEMENT.js"></script>
	<script src="1_ATTAQUE.js"></script>
 
<script>
			$(document).ready(function(){
				//Récupérer la position du joueur
				AfficherMiniMap_Perso();
				RepererPositionInit();
				getInventaire();
				//	SES OBJETS, SA POSITION, CACHE PAR CACHE, SON INVENTAIRE, SA BARRE DE VIE
				//QD UNE ACTION EST REALISEE BLOQUER LES AUTRES ACTIONS
				//Ecoute du clic sur fleche de dplct puis actualiser les données : évnts lointain/dans case/objets dans case/bats/
				$(".Btons_Dpct img").click(function(){
 
					if(T_GLOBAL) {
						var $nomImage=$(this).attr('src');
    					var $suffixe = $nomImage.substr($nomImage.length-5,1);
 
    					if ($suffixe ==1){
							if ($("#btonCachette").attr('src').substr(0,12)==="img/Cache_ok"){
								alert ("Vous sortez de la cachette, que va-t-il vous arriver???!!!");
								DesactiverBtons();
								SortirCache();
							}
								DesactiverBtons();
								SeDeplacer($(this));
								AfficherContenuCase();	
							}
						}
 
				});
 
				//d'autres fonctions analogues
 
				var T_GLOBAL = false; //var du timer instanciée ici pour être (+ ou -) "globale"
 
			//Raffraichissement constant pour maj déplacement possible ou non et évnts sur case ou autour
			function dplct_Joueur(){
 
				T_GLOBAL =setTimeout(function(){
 
					//ActualiserCase();
 
					AfficherMiniMap_Perso();
					OpportuniteAttaque();
					OpportuniteCache();
 
                 	dplct_Joueur(); // on relance la fonction
 
				}, 1000); 
 
			}
 
			dplct_Joueur();
 
			});
 
	</script>

Du côté d'opportuniteAttaque :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
function OpportuniteAttaque() {
 
    $param1=7;
    $param2=4;
 
    $.post(
        'TraitementAjax.php', 
        {
            p1 : $param1,  
            p2 : $param2
        },
       retourAjax_25,
 
        'json' 
     );
}
 
 
function retourAjax_25(data){ 
	var tab=data;
 
    if (tab["Erreur"]===1){
        var c = -1;
        for (var Joueur in tab) {
            if (tab.hasOwnProperty(Joueur)) ++c;
        }
 
        $(".espace_g2").empty();
 
 
 
        for (var i = 1; i <= c; i++) {
        	//alert ("Joueur :" + tab[i]["Joueur"]);
        	//imgEstiVieJoueur
            $(".espace_g2").append("<div class='conteneurAtt' id='ContAtt" + i + "' > </div>");
           	$("#ContAtt" + i).css({
			    'margin-left' : '0px', 
			    'margin-up' : '10px' // marge extérieure de 10px
					});
 
           	$("#ContAtt" + i).append(
           		"<img src='" + tab[i]['AvatarJoueur'] + "'class='avatar' id='att" + i + "' height='60' width='60'>"); 
 
            $("#ContAtt" + i).append(
            	"<img src='" + tab[i]['imgEstiVieJoueur'] + "' class='vie' height='60' width='120'>"); 
 
            $("#ContAtt" + i).append(
            	"<div>" + tab[i]['PseudoJoueur'] + "</div>"); 
 
 
        }
 
    }
 
 
}
 
$(".espace_g2").on("click",".conteneurAtt",function(){
     DesactiverBtons();
 
    $toto=$('input#tpsAttaque').val();
alert(T_GLOBAL);
    /*if(T_GLOBAL) {
        clearTimeout(T_GLOBAL);
        T_GLOBAL = false;
    }*/
 
    setTimeout(
        function(){
            alert ("c par");
        }
    , $toto);
 
    dplct_Joueur();
});

Je ne peux plus faire référence à T_GLOBAL pour lui dire : arrête le timer snifff!

15/01/2020, 23h56
Toufik83
Passons étape par étape même que la discussion sera longue ce n'est pas grave....

Ok, pour la portée des variables, quand tu as une variable qui sera utilisée par d'autres fonctions dans et à l’extérieur du $(document).ready() il est préférable d’initialiser cette variable en dehors du contexte document ready :
Code:

1 2 3 var T_GLOBAL = false; //var du timer instanciée ici pour être (+ ou -) "globale" $(document).ready(....);
Lorsque tu auras fait la manip, dis moi ce qui se passe...
16/01/2020, 23h42
granchef

rôôô la la : ça marche impeccablement (miraculeusement) bien, MERCI!

N'empêche je commence à être perdu car le projet commence à être étoffé. J'ai regardé la liste des tuto proposés, mais rien sur la manière d'agencer du code JS avec les imbrications de fonctions et le jquery qui est capable d'être si j'ai bien compris n'importe où : je serais preneur d'une doc, d'un bouquin, toute ressource qui pourrait m'aider dans ce sens! (je galérais moins en AS3 c'est dire !)

Bonjour,

Je ne peux pas dire que l'utilisation des fonctions imbriquées (sans paramètres) est une mauvaise idée tant que le code est fonctionnel.

Mais d'habitude lorsqu'on crée une fonction js, elle est censée faire un traitement relatif à ses paramètres (comme ce que tu as fais dans la fonction SeDeplacer($(this)) ), exemple :
Code:

1 2 3 4 5 function Func1(parametre1,parametre2){ if(parametre1=="un_truc..."){...} else if(parametre2="machin"){....} }
Comme il est possible de créer une fonction ayant un paramètre sous forme d'objet :
Code:

1 2 3 4 5 6 7 8 9 function Func1(params){ if(params.var1=="valeur1"){...} else if (params.var2=="valeur2"){...} } var parametre={var1:"valeur1",var2:"valeur2"...}; Func1(parametre); //appeler la fonction
Et pour ne pas te compliquer la vie avec les fonctions, si par exemple tu as une fonction non paramétrée, Func1() qui contient quelques instructions :
Code:

1 2 3 4 5 6 function Func1(){ //instruction 1 //instruction 2 //.... }
là tu peux la supprimer et copier seulement ses instructions à l'endroit où tu veux qu'elles s’exécutent. Comme ça tu as une fonction de moins.

17/01/2020, 20h41
granchef

Merci de ton temps et pour la pédagogie.