多个setTimeout上的clearTimeout

我有多个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。

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

因为它只是一个整数id，另一个选项可能是使用诸如“domElement.setAttribute（’timoutIDFirst’）;”之类的东西在dom元素上创建自定义属性。 （或jQuery中的attr）然后在需要时使用getAttribute检索它。

考虑到您有多个计时器，在DOM元素上使用自定义属性可能有助于保持整洁。

例如：

  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

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

 $(document).ready(function(){ $('body').append("
Stop 1
Stop 2
Stop 3 Timer and change massage 'Thanks'
"); 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'); }); 

}）;