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


How to add pause between each iteration of jQuery .each()?

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

在这种情况下，我更新了类名，以触发-webkit-transition-property以利用CSS过渡。

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

1
2
3
4
5
6
7
8
9
10
11
function positionCards() {
  $cards = $('#gameboard .card');
  $cards.each(function() {
      setTimeout( function(){ addPositioningClass($(this)); }, 500 )
  });
}

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

我希望setTimeout可以解决此问题，但似乎无法正常工作。 有没有办法在每个对象的每个CLASS名称更新之前完成暂停？

相关讨论

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

1
2
3
4
5
6
7
8
9
10
function positionCards() {
  var $cards = $('#gameboard .card');

  var time = 500;

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

相关讨论

不好意思，我想挖一个旧的线程，但是这个技巧可能对类似的问题很有用：

1
2
3
$cards.each(function(index) {
    $(this).delay(500*index).addClass('position');
});
相关讨论

如果您创建了一种每500毫秒调用一次的方法，那么该方法就可以解决。下面的代码应该工作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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()怎么样？

要么

1
2
3
function addPositioningClasses($card){
  setTimeout(function() { $card.addClass('position')}, 1000);
}
相关讨论

试试看：

1
2
3
4
5
function positionCards() {
  $('#gameboard .card').each(function() {
      $(this).delay(500).addClass('position');
  });
}

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

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

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

相关讨论

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

相关讨论

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

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

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

1
2
3
4
5
6
7
8
9
10
$( 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;
    });
});

相关讨论