Comment deux setInterval peuvent se stopper alternativement ?

Version imprimable

Bonjour ;)

J'ai deux setInterval qui lancent chacun une action, l'un augmente une valeur et l'autre la diminue.
Donc quand l'un démarre il faut qu'il stoppe l'autre, car on ne peut pas à la fois augmenter une valeur et la diminuer, il faut que ce soit alternatif.

Celui qui augmente est démarré par onmouseover() et celui qui diminue est démarré par onmouseout().

Mon problème c'est que le nom du setInterval n'est pas reconnu par celui qui veut le stopper.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function augmente(){ var valeur++; console.log(valeur); } function diminue(){ var valeur--; console.log(valeur); } boite.onmouseover=function(){plus=setInterval("augmente();", 100);} boite.onmouseout=function(){moins=setInterval("diminue();", 100);}

Salut,

Les variables utilisées par les fonctions doivent être préalablement déclarées.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var plus, moins, valeur=0; // Déclaration globale
 
function augmente(){
	valeur++;
	clearInterval(moins);
	console.log(valeur);
}
 
function diminue(){
	valeur--;
	clearInterval(plus);
	console.log(valeur);
}
 
boite.onmouseover=function(){plus=setInterval(augmente, 100);}
 
boite.onmouseout=function(){moins=setInterval(diminue, 100);}

EDIT : En fait pour éviter d'avoir trop de variables globales, il est préférable d'utiliser une closure. Ainsi les variables nécessaires à la fonction restent "privées".

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
var myFunction=function(){
	var id,value,step,byStep,delay;
 
	function show(){
		value+=step;
		console.log('valeur : '+value + ' ; Pas : '+step);
	}
 
	return{
		augmente:function(){
			step=+byStep;
			if(!id)id=setInterval(show,delay)
		},
		diminue:function(){
			step=-byStep;
			if(!id)id=setInterval(show,delay)
		},
		setValues:function(v,d,s){
			if(id){clearInterval(id);id=null}
			value=typeof v=='number'?v:0;
			delay=typeof d=='number'?d:100;
			byStep=typeof s=='number'?Math.abs(s):1;
		}
	};
}();
 
var boite=document.getElementById('boite');
 
myFunction.setValues(0,500,2); // La valeur initiale 0 sera modifiée toutes les 1/2 secondes par pas de 2
 
boite.onmouseover=myFunction.augmente; 
boite.onmouseout=myFunction.diminue;

28/01/2016, 14h21
progdebutant

Je te remercie de ton aide ;)
Tes explications sont très utiles pour moi, je vais essayer de comprendre ces closures grace à ton code et sur un tuto, Merci encore, je vais tester tout ça, au premier abord ça semble pas évident ;)
28/01/2016, 14h54
progdebutant

Merci je suis super content ça marche, il faut que je me plonge un peu plus dans ces closures c'est magique ;)

Je mets en résolu ^^