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

我正在抓取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名称更新之前完成暂停？

我将其添加为评论，但现在我已正确阅读并回答了自己的问题，这可能会起作用：

function positionCards() {
  var $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');
});

如果您创建了一种每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/

如何.delay（） ？

要么

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

如果您仅以Safari / iOS为目标，则取决于控制动画序列的确切时间对您来说有多重要，那么您应该避免使用任何涉及JS超时的解决方案。无法保证动画将在超时延迟的同时完成，尤其是在速度较慢的处理器或在后台运行大量操作的计算机上。更高版本的Webkit（包括移动Safari）确实允许通过进行定时动画播放@-webkit-keyframes。Webkit.org有一个不错的介绍。实际上很容易实现。

试试看：

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

老实说...在过去，$（this）.delay（）在某些情况下行为不当，而在其他情况下则可以完美地工作。但是，这通常与jQuery动画调用结合在一起，而不是与DOM属性操纵结合在一起。

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

据我所知，$（）。each确实按程序执行，因此，下一次调用调用仅应在前一个操作完成之后开始。

检查一下，对我来说很好！:)

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

该代码会将初始延迟设置为50ms。然后，对于通过“ .row”类的每个循环，它将添加一个额外的200ms延迟。这将为每行创建一个不错的延迟显示效果。

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