jQuery .delay() 和 .setTimeout()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7407935/
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
.delay() and .setTimeout()
提问by Randomblue
According to jQuery document on .delay(),
根据 jQuery 文档.delay()，
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 函数，后者可能更适合某些用例。
Could someone please expand on this? When is it more appropriate to use .delay(), and when is it better to use .setTimeout()?
有人可以扩展一下吗？什么时候用比较合适.delay()，什么时候用比较好.setTimeout()？
回答by adamjmarkham
I think what you posted explains itself really.
我认为您发布的内容确实说明了自己。
Use .delay()for jQuery effects including animations.
使用.delay()jQuery的效果，包括动画。
setTimeout()is best used for everything else. For example when you need to trigger an event at a certain elapsed time.
setTimeout()最好用于其他一切。例如，当您需要在某个经过时间触发事件时。
回答by Derrick Tucker
As far as I understand, .delay()is meant specifically for adding a delay between methods in a given jQuery queue. For example, if you wanted to fade an image into view during the span of 1 second, have it visible for 5 seconds, and then spend another second to fade it out of view again, you could do the following:
据我了解，.delay()专门用于在给定 jQuery 队列中的方法之间添加延迟。例如，如果您想在 1 秒内将图像淡入视野，使其可见 5 秒，然后再花一秒钟将其淡出视野，您可以执行以下操作：
$('#image').fadeIn(1000).delay(5000).fadeOut(1000);
In this instance, .delay()is more intuitive to use since it is specifically meant for delaying events in a given jQuery queue. setImeout(), on the other hand, is a native JavaScript method that isn't intended explicitly for a queue line. If you wanted an alert box to pop up 1 second after clicking on a button, you could do the following:
在这种情况下，.delay()使用起来更直观，因为它专门用于延迟给定 jQuery 队列中的事件。 setImeout()另一方面，是一种原生 JavaScript 方法，不明确用于队列行。如果您希望在单击按钮后 1 秒弹出警告框，您可以执行以下操作：
function delayAlert() {
var x = setTimeout("alert('5 seconds later!')", 5000);
}
<input type="submit" value="Delay!" onclick="delayAlert();" />
回答by Guffa
You can use delaywith animations, for example:
您可以使用delay动画，例如：
$('.message').delay(5000).fadeOut();
You can also use timeOutto delay the start of animations, for example:
您还可以使用timeOut延迟动画的开始，例如：
window.setTimeout(function(){
$('.message').fadeOut();
}, 5000);
As you see, it's easier to use delaythan setTimeoutwith animations.
如您所见，它delay比setTimeout动画更易于使用。
You can delay pretty much anything with setTimeout, but you can only delay animations with delay. Methods that aren't animations are not affected by delay, so this would not wait a while before hiding the element, it would hide it immediately:
您可以使用 延迟几乎任何东西setTimeout，但您只能使用 延迟动画delay。不是动画的方法不受 影响delay，因此在隐藏元素之前不会等待一段时间，它会立即隐藏它：
$('.message').delay(5000).hide();
回答by sberry
.delay()is mostly used for chaining together animation effects with pauses in between.
.delay()主要用于将动画效果链接在一起，中间有暂停。
As the docs mention, there is no way to cancel the delay. In the case where you may want to cancel the delay, a setTimeout()should be used instead so you can cancel it with clearTimeout()
正如文档所述，无法取消延迟。在您可能想要取消延迟的情况下，setTimeout()应该使用 a 代替，以便您可以取消它clearTimeout()
回答by Glen
Another side effect of delay(): it seems to disable the ability to hide (or fadeOut, etc) the objecting being delayed, until the delay is over.
delay() 的另一个副作用：它似乎禁用了隐藏（或淡出等）被延迟的对象的能力，直到延迟结束。
For example, I set up the following code (perhaps a stackoverflow developer will recognize the css names....) to hide a 'div':
例如，我设置了以下代码（也许 stackoverflow 开发人员会识别 css 名称....）来隐藏一个“div”：
$j(document).ready(function(){
var $messageDiv = $j("<div>").addClass('fading_message')
.text("my alert message here").hide();
var $closeSpan = $j("<span>").addClass('notify_close').text("x");
$closeSpan.click(function() {$j(this).parent().slideUp(400);});
$messageDiv.append($closeSpan);
$j('.content_wrapper_div').prepend($messageDiv);
$messageDiv.fadeTo(500, .9).delay(5000).fadeTo(800,0);
});
Clicking the "x" that's in the span (that's in the 'div') did fire off the click function (I tested with an alert in there), but the div didn't slideUp as directed. However, If I replace the last line with this:
单击跨度中的“x”（在“div”中）确实触发了单击功能（我在那里测试了警报），但 div 没有按照指示滑动。但是，如果我用这个替换最后一行：
$messageDiv.fadeTo(500, .9);
..then it did work - when I clicked the "x", the surrounding div slideUp and and away. It seems as if the background running of the "delay()" function on the $messageDiv "locked" that object, so that a separate mechanism trying to close it couldn't do so until the delay was done.
..然后它确实起作用了-当我单击“x”时，周围的 div 向上滑动并离开。似乎 $messageDiv 上“delay()”函数的后台运行“锁定”了该对象，因此尝试关闭它的单独机制在延迟完成之前无法关闭。
