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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (72)

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

在本例中,我更新了类名,以触发一个-webkit-Transfer-属性来利用CSS转换。

在每个CSS转换开始之前,我希望有一个暂停。我使用以下内容,但每次更新之间都不会有任何延迟。相反,它们似乎都是一次更新。

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

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

我本来希望setTimeout能解决这个问题,但它似乎行不通。是否有办法在每个对象的每个类名更新之前完成暂停?

提问于
用户回答回答于

这可能会奏效:

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

  var time = 500;

  $cards.each(function() {
      setTimeout( function(){ addPositioningClass($(this)); }, time)
      time += 500;
  });
}
用户回答回答于

这个技巧对于其他类似的案例来说是有用的:

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

扫码关注云+社区

领取腾讯云代金券