Как добавить паузу между каждой итерации jQuery .each ()?

Question

Я собираю массив объектов jQuery, а затем с помощью .each () изменяю каждый отдельный jquery в массиве.

В этом случае я обновляю имена классов, чтобы вызвать -webkit-Переходное свойство использовать переход 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/

Answer 4

Как насчет .delay () ?

или

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

Answer 5

Дайте этому попытку:

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

Буду честным ... В некоторых случаях у меня была ошибка $ (this) .delay () в прошлом, а в других - безупречно.Однако это обычно связано с вызовами анимации jQuery, а не с манипулированием атрибутами DOM.

Обратите внимание, что .delay () не работает так же, как setTimeout.Для получения дополнительной информации см. документацию jQuery .delay () .

Насколько мне известно, каждый из $ (). Выполняется процедурно, поэтому следующая итерация вызова должна начинаться толькопосле завершения предыдущего.

Answer 6

Если вы ориентируетесь только на Safari / iOS, в зависимости от того, насколько важно для вас контролировать точное время анимационных последовательностей, вам, возможно, следует избегать любого решения, которое включает тайм-ауты JS. Нет никакой гарантии, что анимация будет завершена одновременно с задержкой по таймауту, особенно на медленных процессорах или машинах, на которых много чего происходит в фоновом режиме. Более поздние версии webkit (включая мобильное сафари) допускают синхронизированные последовательности анимации через @-webkit-keyframes. Webkit.org имеет хорошее вступление к этому . Это на самом деле довольно легко реализовать.

Answer 7

Этот код добавит установить начальную задержку 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;
    });
});

Answer 8

Проверьте это, хорошо сработало для меня! :)

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