如何在 jQuery.each()的每次迭代之间添加暂停？

我抓取了一个 jQuery 对象数组，然后通过. each ()修改数组中的每个 jQuery。

在本例中，我更新了类名，以触发一个-webkit-shift-property，从而利用一个 css 转换。

我想有一个暂停之前，每个 CSS 过渡开始。我正在使用以下内容，但是每次更新之间没有延迟。相反，它们似乎都在同时更新。

function positionCards() {
$cards = $('#gameboard .card');
$cards.each(function() {
setTimeout( function(){ addPositioningClass($(this)); }, 500 )
});
}


function addPositioningClasses($card){
$card
.addClass('position')
}

我希望 setTimeout 能够解决这个问题，但是它似乎不起作用。是否有办法在每个对象的每个 CLASS 名称更新之前完成暂停？

99429 次浏览
小开
最佳答案

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;
});
}
小开

How about .delay() ?

or 

function addPositioningClasses($card){
setTimeout(function() { $card.addClass('position')}, 1000);
}
小开

If you make a method that calls itself every 500 ms that should do that trick. The following code should work. 

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/

小开

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.

小开

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.

Please be aware .delay() does not function in the same way as setTimeout. For more information, see the jQuery .delay() documentation.

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.

小开

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');
});
小开

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');
});
});
小开

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.

$( 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;
});
});

提交答案