clear auf mehreren SetTimeout

Question

ich mehrere SetTimeout Funktionen wie dieses:

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

Welche Onclick in jquery aktiviert wird:

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

Was ich tun muss, ist das Klicken zu bekommen unsichtbar zu verstecken Spannweite auch.

Ich bin mir nicht sicher, wie zu tun ist, um die ClearTimeout-Funktion zu schreiben, die die Schleife stoppen wird. Jede Hilfe wird sehr geschätzt. Vielen Dank.

Answer 1

Nicht sicher, ob Ihnen das bereits bekannt ist, aber clearTimeout akzeptiert eine timeoutID, die zuvor von einem Aufruf von setTimeout zurückgegeben wurde.

Daher müssen Sie diese Timeout-ID einer Variablen zuweisen, die im Gültigkeitsbereich bleibt, wenn Sie sie abbrechen müssen. Übergeben Sie es dann an den clearTimeout-Aufruf, wenn Sie die Schleife anhalten müssen.

Da es sich nur um eine Integer-ID handelt, könnte eine andere Option sein, ein benutzerdefiniertes Attribut für ein dom-Element zu erstellen, das etwas wie "domElement.setAttribute ('timoutIDFirst');" (oder attr in jQuery) und dann einfach mit getAttribute abrufen, wenn erforderlich.

Wenn Sie mehrere Timer verwenden, kann die Verwendung von benutzerdefinierten Attributen für die DOM-Elemente helfen, die Dinge übersichtlicher zu gestalten.

Beispiel:

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

     }; 

und dann:

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

Wahrscheinlich der beste Weg, dies zu handhaben ist setInterval() anstelle von setTimeout zu verwenden. Wie setTimeout gibt setInterval eine Ganzzahl zurück, die an clearInterval() übergeben werden kann, um die Verarbeitung abzubrechen.

ein Beispiel wäre (Warnung, ich habe dies überhaupt nicht getestet):

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

Haben Sie einen Blick auf jQuery Warteschlange? Ich habe es nicht benutzt, aber es scheint so zu sein, dass es genau das macht, was du machst.

Answer 4

Dies ist der einfache Weg zu mehreren Zeitüberschreitungen mit und Löschen. sein einfacher Trick kopieren Sie einfach mit jquery Paste

$(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'); 
}); 

});