jQuery delay（） – 如何阻止它？

我已经尝试过stop（true，true），stop（true）和clearQueue（）; 但这不起作用。

我有快速更换幻灯片的问题，我已经有一些function必须重置一切，但它不起作用。

function reset(){ $('div').clearQueue(); $('#img').html('').css({'left':0,'right':0,'opacity':1,'z-index':1}); $('#img2').html('').css({'left':0,'right':0,'opacity':1,'z-index':1}); $('#place').html('');$('#place').html('
'); } 

但我认为这不会停止（或删除）动画上的delay（）函数。 所以我不知道我是否不必使用setTimeout函数。

这是一块动画脚本：

 reset(); actual_slide=2; $('#img').html('').css({'opacity':0,'z-index':2}).delay(time_delay/5).fadeTo(time_fast,1).delay(time_delay*2).fadeTo(time_fast,0); $('#img2').html('').css({'opacity':'0','top':0}).fadeTo(time_fast,1).animate({'top':'-495'},time_delay*3,function(){ if(actual_slide==2){$('#img2').css({'top':0}).fadeTo(time_fast*2,0).html('');}else{reset();} if(actual_slide==2){$('#img').html('').fadeTo(time_fast*2,'1').css({'left':-300,'top':-700}).animate({'left':-900,'top':-700},time_delay*2);}else{reset();} if(actual_slide==2){$('#1').css({'width':1365,'height':1200}).animate({'width':1665,'height':1400},time_delay*2);}else{reset();} }); 

那个actual_slide必须在重复那个函数之前保护它，但这也不行。问题是当我快速更改幻灯片时，因为重置不会阻止所有内容，并且它开始做我不想要的事情在（比如将照片改为其他和其他）。

Answer 1

从jQuery 延迟页面：

.delay（）方法最适合延迟排队的jQuery效果。 因为它是有限的 – 例如，它没有提供取消延迟的方法 – .delay（）不能替代JavaScript的本机setTimeout函数，这可能更适合某些用例。

看看doTimeout插件; 它可能就是你要找的东西。

我希望这有帮助！

Answer 2

你可以通过.dequeue（）函数来破坏.delay（）

这是一个例子

 //this is only for make sure that we skip 'delay', not other function var inDelay = false; function start() { $('.gfx').animate ({ width: 100 }, function(){inDelay = true}).delay(3000).animate ({ width: 0 }, function(){inDelay = false}) } function breakTheDelay() { if(inDelay) { $('.gfx').dequeue(); } } 

http://jsfiddle.net/wasikuss/5288z/

//编辑：提供日志时间戳和清理的更复杂的示例（没有清理，多次点击Start是不可预测的）来certificate它是有效的

http://jsfiddle.net/q0058whc/

或以下

 //this is only for make sure that we skip 'delay', not other function var inDelay = false; var ltime = 0; // console log will aways show 'end' values: 2000, 1000 an 400 // values may be different due to time wasted on calling functions // sometimes delay is shorten by 0-200ms, it can be caused by js engine probably function start() { cleanup(); ltime = (1*new Date()); $('.gfx').queue('fx', function(next) { logtime( 'animate1_start' ); $('.gfx').animate ({ width: 100 }, 2000, function(){logtime('animate1_end');inDelay = true;}) next(); }) .queue('fx', function(next) { logtime('delay_start'); next() }) .delay(1000) .queue('fx', function(next) { logtime('delay_end'); next() }) .queue('fx', function(next) { logtime('animate0_start'); $('.gfx').animate ({ width: 0 }, function(){logtime('animate0_end');inDelay = false;}) next() }); } function cleanup() { // remove current queue $('.gfx').clearQueue() // first animate runned interval. stop it .stop() // reset width of element .css('width',0) } function logtime( name ) { var ntime = (1*new Date()); console.log( name + ': ' + ( ntime - ltime ) ); ltime = ntime; } function breakTheDelay() { if(inDelay) { $('.gfx').dequeue(); } } // // version without 'inDelay' check only if you know what are you doing // http://jsfiddle.net/wasikuss/hkw9H/ // 

 .gfx { background: red; width: 0; height: 10px } 

  Start Can't wait! 
 

Answer 3

通过这篇文章，有一个非常简单的方法，即使用.animate代替.delay

Answer 4

我希望用户能够一次又一次地快速重启动画链，有时候是在动画的中间。 因此，我没有使用delay()而是使用伪造的css propery {"null":1} 。 这是一个简单的淡入/淡出。 似乎对我有用！

 //- fade in $el.stop().animate({"opacity":1}, 200, "easeInSine", function(){ //- delay for 2000ms $el.stop().animate({"null":1}, 2000, function(){ //- fade out $el.stop().animate({"opacity":0}, 1000, "easeInOutSine", function(){ //- final callback }); }); });