如何在 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 能够解决这个问题，但它似乎不起作用。有没有办法在每个对象的每个类名更新之前完成暂停？

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/

Answer 4

.delay()怎么样？

或

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

Answer 5

如果您仅针对 Safari/iOS，则根据控制动画序列的确切时间对您来说有多重要，您可能应该避免任何涉及 JS 超时的解决方案。无法保证动画会在超时延迟的同时完成，特别是在速度较慢的处理器或后台运行大量内容的机器上。更高版本的 webkit（包括 mobile safari）确实允许通过

@-webkit-keyframes

实现定时动画序列。 Webkit.org 有一个很好的介绍。实际上很容易实现。

Answer 6

尝试一下：

function positionCards() {
  $('#gameboard .card').each(function() {
      $(this).delay(500).addClass('position');
  });
}

老实说...我过去在某些情况下 $(this).delay() 行为不当，但在其他情况下却完美地工作。然而，这通常与 jQuery 动画调用结合使用，而不是 DOM 属性操作。

请注意 .delay() 的功能与 setTimeout 不同。有关更多信息，请参阅 jQuery .delay() 文档。

据我所知， $().each 确实按程序执行，因此调用的下一次迭代应该仅在前一个迭代完成后开始。

Answer 7

看看这个，对我来说效果很好！ :)

jQuery('.optiresultsul li').each(function(index) {
    jQuery(this).delay(500*index).animate({ opacity: 1 }, 500,function(){
        jQuery(this).addClass('bgchecked');
    });
});

Answer 8

此代码将添加将初始延迟设置为 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;
    });
});