I have multiple setTimeout functions like this:

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

Which is activated in jquery onclick:

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

What I need to do, is to get the click to hide invisible span as well.

    $('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 to write the clearTimeout function that will stop the loop. Any help is greatly appreciated. Thanks.

I have multiple setTimeout functions like this:

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

Which is activated in jquery onclick:

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

What I need to do, is to get the click to hide invisible span as well.

    $('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 to write the clearTimeout function that will stop the loop. Any help is greatly appreciated. Thanks.

• javascript
• jquery

5 Answers 5

Not sure if you are already aware of this but, clearTimeout accepts a timeoutID that is previously returned from a call to setTimeout.

Therefore you need to assign this timeout id to a variable that remains in scope for when you need to cancel it. Then pass it to the clearTimeout call when you need to stop the loop.

As it is just an integer id, another option might be to create a custom attribute on a dom element using something like "domElement.setAttribute('timoutIDFirst');" (or attr in jQuery) and then just retrieve it using getAttribute when required.

Considering you have multiple timers, using custom attributes on the DOM elements may help keep things tidier.

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

        };

and then:

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

Probably the best way to handle this is to use setInterval() instead of setTimeout. Like setTimeout, setInterval returns an integer, which can be passed to clearInterval() to cancel the processing.

an example would be (warning, I've not tested this at all):

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

This is the simple way to multiple timeouts using and clearing. 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');
});

Have you had a look at jQuery queue? I've not used it but it seems to be designed to do what you're doing.

Why not making an object then iterate through that object and clear the timeouts? Like this:

// Make an object
let timeouts = {}

// Then assign them
timeouts.a = setTimeout(() => func1(), 100)
timeouts.b = setTimeout(() => func2(), 100)
timeouts.c = setTimeout(() => func3(), 100)

// To clear them all
Object.keys(timeouts).map(e => clearTimeout(timeouts[e]))