clearTimeout для нескольких setTimeout

Question

У меня есть несколько функций setTimeout, как это:

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

Который активируется в jquery onclick:

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

Что мне нужно сделать, так это получить клик, чтобы скрыть невидимый промежуток.

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

Что я не знаю, как это сделать, так это написать функцию clearTimeout, которая остановит цикл. Любая помощь очень ценится. Благодаря.

Answer 1

Не уверен, если вы уже знаете об этом, но clearTimeout принимает timeoutID, который ранее возвращался из вызова setTimeout.

Поэтому вам необходимо присвоить этот идентификатор тайм-аута переменной, которая остается в области действия, когда вам нужно отменить ее. Затем передайте его вызову clearTimeout, когда вам нужно остановить цикл.

Поскольку это просто целочисленный идентификатор, другим вариантом может быть создание настраиваемого атрибута для элемента 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);
            }
    );

Answer 2

Вероятно, лучший способ справиться с этим - использовать 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 );
}

Answer 3

Это простой способ использования и очистки нескольких тайм-аутов. его простой трюк просто скопируйте вставить

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

Answer 4

Вы смотрели на очередь jQuery? Я не использовал его, но, похоже, он создан для того, чтобы делать то, что вы делаете.