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

Question

我正在抓取一个jQuery对象数组,然后通过.each()修改数组中的每个单独的jquery.

在这种情况下,我更新了类名以触发-webkit-transition-property以利用css转换.

我想在每次css转换开始之前暂停一下.我正在使用以下内容,但每次更新之间没有延迟.相反,它们似乎都在立即更新.

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

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

我希望setTimeout可以解决这个问题,但它似乎没有起作用.有没有办法在每个对象的每个CLASS名称更新之前完成暂停？

Answer 1

我添加了这个作为评论,但现在我已经正确阅读并回答了我自己的问题,这可能会有效:

function positionCards() {
  var $cards = $('#gameboard .card');

  var time = 500;

  $cards.each(function() {
      setTimeout( function(){ addPositioningClass($(this)); }, time)
      time += 500;
  });
}

Answer 2

很抱歉挖掘旧线程,但此提示可能对类似问题有用:

$cards.each(function(index) {
    $(this).delay(500*index).addClass('position');
});

Answer 3

如果你创建一个每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)
    }
}

测试小提琴:http://jsfiddle.net/jomanlk/haGfU/