Як додати паузу між кожною ітерацією jQuery .each ()?

Я захоплюю масив об'єктів 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 вирішить це, але, схоже, це не працює. Чи є спосіб зробити паузу перед кожним оновленням імені КЛАСУ кожного об’єкта?

Я додав це як коментар, але тепер, коли я прочитав його правильно і відповів на власне запитання, це, мабуть, спрацює:

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 (включаючи мобільне сафарі) дозволяють проводити послідовні анімаційні послідовності через @-webkit-keyframes. Webkit.org має гарне вступ до цього . Насправді це досить просто реалізувати.

Спробуйте:

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

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

Зверніть увагу, що .delay () не працює так само, як setTimeout. Для отримання додаткової інформації див . Документацію jQuery .delay () .

Наскільки мені відомо, $ (). Кожен виконується процедурно, тому наступна ітерація виклику повинна розпочатися лише після завершення попереднього.

Перевірте це, добре в мене вийшло! :)

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

Цей код додасть встановити початкову затримку до 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;
    });
});