Geek Answers Handbook

ClearTimeout for multiple setTimeout

I have several setTimeout functions, for example:

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

What is activated in jquery onclick:

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

What I need to do is get a click to hide the invisible range.

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

What I'm not sure how to do is write a clearTimeout function that will stop the loop. Any help is appreciated. Thanks.

+5
source share
4 answers

Not sure if you already know this, but clearTimeout accepts the timeoutID that was previously returned from the setTimeout call.

Therefore, you need to assign this timeout identifier to a variable that remains in the area when you need to cancel it. Then pass it on to clearTimeout when you need to stop the loop.

id, dom - "domElement.setAttribute(" timoutIDFirst "); ( attr jQuery), , getAttribute, .

, , DOM .

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

        };

:

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

, - setInterval() setTimeout. setTimeout, setInterval , clearInterval() .

(, ):

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

jQuery? , , , , , .

+1

This is an easy way to use and clear multiple timeouts. its simple trick just copy 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');
});
+1
source

More articles:


All Articles