clearTimeout en setTimeout múltiples

Question

tengo varias funciones setTimeout así:

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); 
    }; 

que se activa en jQuery onclick:

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

Lo que tengo que hacer, es conseguir el clic para ocultar invisibles abarcar también.

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

lo que no estoy seguro de cómo hacer es escribir la función clearTimeout que detener el bucle. Cualquier ayuda es muy apreciada. Gracias.

Answer 1

No estoy seguro de si ya lo sabe, pero clearTimeout acepta un timeoutID que se devuelve previamente de una llamada a setTimeout.

Por lo tanto, debe asignar este ID de tiempo de espera a una variable que permanezca en el alcance para cuando necesite cancelarla. Luego, páselo a la llamada a clearTimeout cuando necesites detener el ciclo.

Como solo es una identificación entera, otra opción podría ser crear un atributo personalizado en un elemento dom usando algo como "domElement.setAttribute ('timoutIDFirst');" (o attr en jQuery) y luego simplemente recupérelo usando getAttribute cuando sea necesario.

Teniendo en cuenta que tiene múltiples temporizadores, el uso de atributos personalizados en los elementos DOM puede ayudar a mantener las cosas más ordenadas.

Ejem:

 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); 

     }; 

y luego:

$('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

Probablemente la mejor manera de manejar esto es usar setInterval() en lugar de setTimeout. Al igual que setTimeout, setInterval devuelve un entero, que se puede pasar a clearInterval() para cancelar el procesamiento.

un ejemplo sería (advirtiendo, no he probado esto en absoluto):

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

¿Ha tenido un vistazo a la cola de jQuery? No lo he usado pero parece estar diseñado para hacer lo que estás haciendo.

Answer 4

Esta es la manera más simple de usar múltiples tiempos de espera y borrar. su simple truco simplemente copiar y pegar con 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'); 
}); 

});