11521 sujets

JavaScript, DOM et API Web HTML5

Souci avec une variable booléenne en JQuery

Bonjour,

j'ai un slideshow en JQuery qui défile automatiquement, j'ai également des flèches pour permettre à l'internaute de passer à l'image suivante ou précédente. Tout est ok, sauf que j'aimerais que lorsque l'internaute clique sur une des flèches, cela mette le défilement auto en pause.

Pour cela je fais des tests avec une variable booléenne : quand un clic est effectué sur une des flèches, ma variable passe à false et si elle est false pas de défilement auto.

En gros dans le code :

$('.suivant').click(function() {
	diapoOK = false;
	suivant();
	});
	
$('.precedent').click(function() {
	diapoOK = false;
	precedent();
	});
	
if (diapoOK == true){
	setInterval(function(){
		suivant();	
	}, 5000);
}


Sauf que lorsque je clique sur suivant ou precedent, je vois bien ma variable passée à false, mais le défilement continue toujours ... Smiley biggol
Bonjour,

Une solution simple (si tu ne peux pas relancer le défilement auto) :
if (diapoOK){
  var timer = setInterval(function(){
    if (diapoOK) suivant();	
    else clearInterval(timer);
  }, 5000);
}
Ta solution ne fonctionne pas SolidSnake ; en fait ça fait comme mon code, DiapoOK vaut false mais ça défile toujours ...
Modifié par rocketter (22 Apr 2016 - 13:49)
C'est pas compliquer à comprendre.

Ton if (diapo = true) est lancer lorsque le document est ready. DONC le setInterval est démarer également car au début ton diapo doit être true.
Tu aura beau mettre ta variable a false sa ne changera rien et pourquoi ? parce que le if est tester uniquement quand le document est ready. il est pas tester en permanence, à la limite, lance un setinterval qui test ta variable toutes les x seconde.

EDIT :

ou mettre créer une function qui reçoit en argument ton boolean, exemple:

function setResetInterval(bool){
  
  var el = $("#container");
  if(bool){
        timer = setInterval(function(){
        el.css("background", "red");
      setTimeout(function(){
        el.css("background", "blue");
      },500);
    },1000);
  }else{
    clearInterval(timer); 
  }
}

$("#set").click(function(e){
  e.preventDefault();
  setResetInterval(true);
});

Modifié par JENCAL (22 Apr 2016 - 15:39)
Merci de l'explication Jencal, vu comme ça oui c'est logique.

J'me suis inspiré de vos codes pour m'en tirer :

setInterval(function(){
		if (diapoOK){
			suivant()
		}
		else
		{
		setTimeout(function(){ 
			diapoOK = true;
			}, 2000);
		}
	}, 5000);


Par contre concernant le code de SolidSnake :
if (diapoOK){
  var timer = setInterval(function(){
    if (diapoOK) suivant();	
    else clearInterval(timer);
  }, 5000);
}


On place le setInterval dans une variable, et cette variable est ensuite place en paramètre de clearInterval si le booléen est à false. C'est une syntaxe que je ne connaissais pas, c'est un peu abstrait pour moi le fait de mettre setInterval dans une variable et dans ce setInterval de faire un traitement sur cette variable.
Bonjour,
rocketter a écrit :
On place le setInterval dans une variable, et cette variable est ensuite place en paramètre de clearInterval si le booléen est à false. C'est une syntaxe que je ne connaissais pas, c'est un peu abstrait pour moi le fait de mettre setInterval dans une variable et dans ce setInterval de faire un traitement sur cette variable.

C'est la syntaxe pour faire un reset sur ton timer.

... étrange que mon code ne fonctionne pas Smiley sweatdrop
Merci de ta réponse SolidSnake, même avec la doc ça me déroute toujours un peu, car dans l’exemple de la doc, tout est placé dans différentes fonctions.
Finalement ta syntaxe est une manière plus concise d'écrire ceci :


var timer;

if (diapoOK){
 timer = setInterval(function(){
    if (diapoOK) suivant();	
    else StopDiapo();
  }, 5000);

function StopDiapo() {
  clearInterval(timer);
}
}


Faut que je m'y fasse mais si ça revient au même, c'est mieux d'écrire au plus court c'est sûr.
rocketter a écrit :
Finalement ta syntaxe est une manière plus concise d'écrire ceci :

Je confirme

EDIT : un intérêt que l'on peut trouver à y mettre dans une fonction, est que tu pourrais appeler cette fonction via une ou plusieurs autres actions, et donc factoriser le code, et factoriser le code, c'est le BIEN !
Modifié par SolidSnake (25 Apr 2016 - 11:25)
Sujet clos
Aller à