clearTimeout sur plusieurs setTimeout

Question

Je dispose de plusieurs fonctions de SetTimeOut comme ceci:

function bigtomedium(visiblespan) { 
     visiblespan.removeClass('big').addClass('medium'); 
     setTimeout(function(){ mediumtosmall(visiblespan);},150); 
    }; 

    function mediumtosmall(visiblespan) { 
     visiblespan.removeClass('medium').addClass('small'); 
     setTimeout(function() { smalltomedium(visiblespan); },150); 
    }; 

    function smalltomedium(visiblespan) { 
     visiblespan.removeClass('small').addClass('medium'); 
     setTimeout(function() { mediumtobig(visiblespan); },150); 
    }; 

    function mediumtobig(visiblespan) { 
     visiblespan.removeClass('medium').addClass('big'); 
     setTimeout(function() { bigtomedium(visiblespan); },150); 
    }; 

qui est activé dans jquery onclick:

$('div.click').click(
     function(event) { 
      var visiblespan = $('span:visible'); 
      mediumtosmall(visiblespan); 
     } 
    ); 

Ce que je dois faire, est d'obtenir le clic pour cacher invisible span aussi bien.

$('div.click').click(
     function(event) { 
      var visiblespan = $('span:visible'); 
          var invisiblespan = $('span:not(:visible)'); 
      mediumtosmall(visiblespan); 
      clearTimeout(invisiblespan); 
     } 
    ); 

Ce que je ne suis pas sûr de savoir comment faire est d'écrire la fonction clearTimeout qui arrêtera la boucle. Toute aide est grandement appréciée. Merci.

Answer 1

Vous ne savez pas si vous le savez déjà, mais clearTimeout accepte un ID de délai retourné précédemment à la suite d'un appel à setTimeout.

Par conséquent, vous devez affecter cet ID de délai d'attente à une variable qui reste dans la portée pour lorsque vous devez l'annuler. Passez-le ensuite à l'appel clearTimeout lorsque vous avez besoin d'arrêter la boucle. Comme il s'agit juste d'un identifiant entier, une autre option pourrait être de créer un attribut personnalisé sur un élément dom en utilisant quelque chose comme "domElement.setAttribute ('timoutIDFirst');" (ou attr dans jQuery), puis récupérez-le en utilisant getAttribute si nécessaire. Considérant que vous avez plusieurs minuteurs, l'utilisation d'attributs personnalisés sur les éléments DOM peut aider à garder les choses plus rangées.

EG:

 function mediumtosmall(visiblespan) { 
       vt.removeClass('medium').addClass('small'); 

       // Store the timeoutID for this timer 
       var storedTimeoutID=setTimeout(function() { smalltomedium(visiblespan); },150); 
       $('span:visible').attr('timeoutID',storedTimeoutID); 

     }; 

puis:

$('div.click').click(
      function(event) { 
        var visiblespan = $('span:visible'); 
     var invisiblespan = $('span:visible'); 
        mediumtosmall(visiblespan); 

        var storedTimeoutID=invisibleSpan.attr('timeoutID'); 
        // Pass the ID to clearTimeout 
        clearTimeout(storedTimeoutID); 
      } 
    ); 

Answer 2

Probablement la meilleure façon de gérer est d'utiliser setInterval() au lieu de setTimeout. Comme setTimeout, setInterval renvoie un entier, qui peut être passé à clearInterval() pour annuler le traitement.

un exemple serait (avertissement, je ne l'ai pas testé du tout):

function animateSizes(jQueryElement) { 
    if(jQueryElement.hasClass("big") 
    jQueryElement.removeClass("big").addClass("medium"); 
    else if(jQueryElement.hasClass("medium")) 
    jQueryElement.removeClass("medium").addClass("small"); 
    else if(jQueryElement.hasClass("small")) 
    jQueryElement.removeClass("small").addClass("smaller"); 
    else 
    jQueryElement.removeClass("smaller").addClass("big"); 
} 


function startAnimation(elem) { 
    var sizeAnimation = window.setInterval(function() {animateSizes(elem)}, 150); 
    elem.attr("sizeAnimation", sizeAnimation); 
} 

function stopAnimation(elem) { 
    var sizeAnimation = elem.attr("sizeAnimation"); 
    window.clearTimeout(sizeAnimation); 
} 

Answer 3

Avez-vous eu un coup d'œil à la file d'attente jQuery? Je ne l'ai pas utilisé, mais il semble être conçu pour faire ce que vous faites.

Answer 4

C'est la manière simple d'utiliser plusieurs fois le timeout. son truc simple il suffit de copier-coller avec jquery

$(document).ready(function(){ 
$('body').append("<div id='clear1' style='width:45px; height:25px; background-color:#999; margin-left:20px; float:left; cursor:pointer; padding:3px 0px 0px 3px;'>Stop 1</div><div id='clear2' style='width:45px; height:25px; background-color:#999; margin-left:20px; float:left; cursor:pointer; padding:3px 0px 0px 3px;'>Stop 2</div><div id='clear3' style='width:305px; height:25px; background-color:#999; margin-left:20px; float:left; cursor:pointer; padding:3px 0px 0px 3px;'>Stop 3 Timer and change massage 'Thanks'</div>"); 
var time1,time2,time3; 
time1f(); 
time2f(); 
time3f('It is a 3st timer'); 
function time1f(){ 
    alert("It is a 1st timer"); 
    time1=setTimeout(time1f,4000); 
} 
function time2f(){ 
    alert("It is a 2st timer"); 
    time2=setTimeout(time2f,5000); 
} 
function time3f(str){ 
    alert(str); 
    time3=setTimeout(time3f,6000,str); 
} 
function stoptimer(){ 
    clearTimeout(time1); 
} 
function stoptimer2(){ 
    clearTimeout(time2); 
} 
function stoptimer3(){ 
    clearTimeout(time3); 
} 
$('#clear1').click(function(){ 
    stoptimer(); 
}); 
$('#clear2').click(function(){ 
    stoptimer2(); 
}); 
$('#clear3').click(function(){ 
    stoptimer3(); 
    time3f('Thanks'); 
}); 

});