如何在 jQuery .each() 的每次迭代之间添加暂停？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5202403/
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
How to add pause between each iteration of jQuery .each()?
提问by DA.
I'm grabbing an array of jQuery objects and then via .each() modifying each individual jquery with in the array.
我正在抓取一个 jQuery 对象数组，然后通过 .each() 修改数组中的每个单独的 jquery。
In this case I'm updated the class names to trigger a -webkit-transition-property to utilize a css transition.
在这种情况下，我更新了类名以触发 -webkit-transition-property 以利用 css 转换。
I'd like there to be a pause before each css transition begins. I'm using the following, but there is no delay in between each update. Instead, they all appear to be updating at once.
我希望在每个 css 转换开始之前有一个暂停。我正在使用以下内容，但每次更新之间没有延迟。相反，它们似乎都在同时更新。
function positionCards() {
$cards = $('#gameboard .card');
$cards.each(function() {
setTimeout( function(){ addPositioningClass($(this)); }, 500 )
});
}
function addPositioningClasses($card){
$card
.addClass('position')
}
I was hoping setTimeout would solve this, but it doesn't seem to be working. Is there a way to accomplish the pause before each CLASS name update of each object?
我希望 setTimeout 能解决这个问题，但它似乎不起作用。有没有办法在每个对象的每个 CLASS 名称更新之前完成暂停？
回答by Rob
I added this as a comment but now that I have read it correctly and answered my own question this would probably work:
我将此添加为评论，但现在我已正确阅读并回答了我自己的问题，这可能会起作用：
function positionCards() {
var $cards = $('#gameboard .card');
var time = 500;
$cards.each(function() {
setTimeout( function(){ addPositioningClass($(this)); }, time)
time += 500;
});
}
回答by johnjohn
Sorry for digging up an old thread, but this tip could be useful for similar issues:
很抱歉挖掘旧线程，但此提示可能对类似问题有用：
$cards.each(function(index) {
$(this).delay(500*index).addClass('position');
});
回答by JohnP
If you make a method that calls itself every 500 ms that should do that trick. The following code should work.
如果你创建一个每 500 毫秒调用一次的方法，那应该可以做到这一点。以下代码应该可以工作。
var __OBJECTS = [];
$('#gameboard .card').each(function() {
__OBJECTS.push($(this));
});
addPositioningClasses();
function addPositioningClasses() {
var $card = __OBJECTS.pop();
$card.addClass('position');
if (__OBJECTS.length) {
setTimeout(addPositioningClasses, 500)
}
}
Tested on fiddle : http://jsfiddle.net/jomanlk/haGfU/
在小提琴上测试：http: //jsfiddle.net/jomanlk/haGfU/
回答by diEcho
回答by Andrew
If you're only targeting Safari/iOS, depending on how important it is to you to control the exact timing of animation sequences, you should maybe avoid any solution that involves JS timeouts. There is no guarantee that the animation will complete at the same time as the timeout delay, particularly on slow processors or machines that have lots of stuff going on in the background. Later versions of webkit (including mobile safari) do allow for timed animation sequences via @-webkit-keyframes. Webkit.org has a nice intro to it. It's actually pretty easy to implement.
如果您只针对 Safari/iOS，根据控制动画序列的确切时间对您来说有多重要，您应该避免任何涉及 JS 超时的解决方案。不能保证动画会在超时延迟的同时完成，特别是在慢速处理器或后台有很多事情发生的机器上。更高版本的 webkit（包括移动 safari）允许通过@-webkit-keyframes. Webkit.org 有一个很好的介绍。它实际上很容易实现。
回答by lsuarez
Give this a try:
试试这个：
function positionCards() {
$('#gameboard .card').each(function() {
$(this).delay(500).addClass('position');
});
}
I'll be honest... I've had $(this).delay() misbehave in the past in certain instances and work flawlessly in others. However, this was normally in conjunction with jQuery animation calls, not DOM attribute manipulation.
老实说......我过去在某些情况下有 $(this).delay() 行为不端，而在其他情况下工作完美无缺。然而，这通常与 jQuery 动画调用结合使用，而不是 DOM 属性操作。
Please be aware .delay() does not function in the same way as setTimeout. For more information, see the jQuery .delay() documentation.
请注意 .delay() 与 setTimeout 的功能不同。有关更多信息，请参阅jQuery .delay() 文档。
As far as I am aware, $().each does execute procedurally so the next iteration of the call should only begin after the preceding has completed.
据我所知， $().each 确实按程序执行，因此调用的下一次迭代应该只在前一次完成后开始。
回答by Deian Motov
Check this out, worked well for me! :)
看看这个，对我来说效果很好！:)
jQuery('.optiresultsul li').each(function(index) {
jQuery(this).delay(500*index).animate({ opacity: 1 }, 500,function(){
jQuery(this).addClass('bgchecked');
});
});
回答by LeeF
This code will add set the inital delay to 50ms. Then for each loop through the ".row" class it will add an additional 200ms delay. This will create a nice delayed show effect for each row.
此代码将添加将初始延迟设置为 50 毫秒。然后对于通过“.row”类的每个循环，它将增加额外的 200 毫秒延迟。这将为每一行创建一个很好的延迟显示效果。
$( document ).ready(function() {
// set inital delay
var dtotal = 50;
$(".row").each(function() {
//add delay to function
$(this).delay(dtotal).show();
//add 200ms to delay for each loop
dtotal = dtotal + 200;
});
});
