jQuery delay() - 如何阻止它？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7929266/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery delay() - how to stop it?
提问by wutter
I already tried stop(true,true), stop(true) and clearQueue(); but this doesn't work.
我已经尝试过 stop(true,true)、stop(true) 和 clearQueue()；但这不起作用。
I have problem with fast changing slides, i already have some function what have to reset everything, but it doesn't work.
我在快速更换幻灯片时遇到问题，我已经有了一些必须重置所有内容的功能，但它不起作用。
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('<div id="img"></div><div id="img2"></div>');
}
But i thing this doesn't stop (or delete) delay() function on animations. So I don't know if i don't have to use setTimeout function.
但是我认为这不会停止（或删除）动画上的延迟（）函数。所以我不知道我是否不必使用 setTimeout 函数。
Here is piece of animation script:
这是一段动画脚本：
reset();
actual_slide=2;
$('#img').html('<img src="'+image[4]+'" alt="Obrázek">').css({'opacity':0,'z-index':2}).delay(time_delay/5).fadeTo(time_fast,1).delay(time_delay*2).fadeTo(time_fast,0);
$('#img2').html('<img src="'+image[3]+'" alt="Obrázek">').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('<img src="'+image[3]+'" id="1" alt="Obrázek">').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();}
});
That actual_slide have to protect it before repeating that function, but that doesn't work too.. Problem is when i fast changing slides, because that reset doesn't stop everything, and it start doing things what i don't want to have in (like change picture to other and other).
在重复该功能之前，该 actual_slide 必须保护它，但这也不起作用。在（如将图片更改为其他和其他）。
采纳答案by dSquared
From the jQuery delaypage:
从 jQuery延迟页面：
The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.
.delay() 方法最适合在排队的 jQuery 效果之间延迟。因为它是有限的——例如，它不提供取消延迟的方法——.delay() 不能替代 JavaScript 的原生 setTimeout 函数，后者可能更适合某些用例。
Take a look at the doTimeoutplugin; it may be what you are looking for.
看看doTimeout插件；它可能是您正在寻找的。
I hope this helps!
我希望这有帮助！
回答by wasikuss
You can break .delay()by .dequeue()function
您可以通过.dequeue()函数中断.delay()
here is example
这是例子
//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/
http://jsfiddle.net/wasikuss/5288z/
//edit: more complex example provided with logging timestamps and cleanup ( without cleanup, multiple clicks on Startis unpredictable ) to prove that it works
//编辑：更复杂的例子提供了日志时间戳和清理（没有清理，多次点击Start是不可预测的）以证明它有效
or below
或以下
//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
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button onclick="start()">Start</button>
<button onclick="breakTheDelay()">Can't wait!</button>
<div class="gfx"></div>回答by Hyman James
回答by thyancey
I wanted a user to rapidly restart an animation chain over and over again, sometimes in the middle of the animation. So instead of using delay()I animated to a bogus css propery {"null":1}. Here's a simple fade-in/fade-out. Seems to have worked for me!
我希望用户一遍又一遍地快速重新启动动画链，有时在动画中间。所以，而不是使用delay()I 动画到一个虚假的 css 属性{"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
});
});
});
