1 Dernière modification par Marie (17-06-2014 01:00:10)

Sujet : [RESOLU] Désactiver setInterval(setTimeout(), n)

Bonjour,

je suis débutante en jQuery, il est probable que je n'aie pas tout compris mais voilà :

Je souhaite changer le background de mon <body> pendant X secondes (X = setTimeout() ) à des intervalles de temps Y ( Y = setInterval() ) lorsque je quitte ma div (".mouseleave()" ). Jusque là tout va bien.

Le problème arrive quand je veux arrêter X et Y lorsque je suis sur la div (".hover()").

J'ai essayé pleins de pleins de façon différentes d'arrêter la chaîne, mais rien n'arrête le décompte/intervalle .

voici mon code :

$(document).ready(function(){
$('#N1').hover(function(){setStyle(1); cligne(0)});
$('#N1').mouseleave(function (){setStyle(0); cligne(1)});
});

function setStyle(numstyle){
    if(numstyle==0){
        $('body').css("background" , "blue");
    }
    else if(numstyle==1){
        $('body').css("background" , "red");
    }
};

function cligne(X){
    var n = Math.floor((Math.random()*4000)+2000);

    if (X==1){
    var Y = setInterval(function (){$('body').css("background" , "green"); var X = setTimeout(function() {$('body').css("background" , "blue");}, 250); }, n );
    }

    else if(X==0){
    clearTimeout(X);
    clearInterval(Y);
    }
};

Je n'ai pas trouvé sur internet de solutions à mon soucis, c'est pourquoi j'ai créé ce topic (possible que j'aie mal cherché...).
Merci d'avance pour votre aide !

2

Re : [RESOLU] Désactiver setInterval(setTimeout(), n)

Bon j'ai trouvé la solution !
Voici le code :

/* Declare a global JS variable, controle the recursive call */
var stopCligne = false;

//Simple control function
function disableCligne()
{
    stopCligne = true;
    $('body').css("background" , "blue");
}

//Simple control function
function enableCligne()
{
    stopCligne = false;
    setCligne(0);
}

//Recursive function doing the job
function setCligne(x)
{
    /* Need to stop the recursive call */
    if (stopCligne)
        return ;
    /* First state */
    if (x == 0)
    {
        $('body').css("background" , "green");
        setTimeout(setCligne, 250, 1); //Recursive call to another state - 250ms
    }
    /* Second state */
    if (x == 1)
    {
        $('body').css("background" , "red"); 
        setTimeout(setCligne, 2000,0);//Recursive call to another state - 2000ms
    }
}
//Start at first
setCligne(0);
//Hover on the div will controle state
$('#N1').hover(disableCligne, enableCligne);