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接受之前从调用setTimeout返回的timeoutID。

因此，您需要将此超时ID分配给一个变量，该变量保留在您需要取消它的范围内。然后在需要停止循环时将其传递给clearTimeout调用。

由于它只是一个整数id，另一个选项可能是使用类似“domElement.setAttribute（'timoutIDFirst'）;”之类的东西在dom元素上创建自定义属性。（或jQuery中的attr）然后在需要时使用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

你看过jQuery队列吗？我没有使用它，但似乎是为了做你正在做的事情。

Answer 4

这是使用和清除多个超时的简单方法。它的简单技巧就是复制粘贴

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

为什么不创建对象然后遍历该对象并清除超时？像这样：

Student Id | marks
101        | 93,63,74,
102        | 63,66,34,
103        | 93,64,54,
104        | 43,93,34,
105        | 95,83,54,

多个setTimeout上的clearTimeout

5 个答案: