Как написать цикл в jQuery, который ждет выполнения каждой функции перед продолжением цикла

Пожалуйста, простите меня, если это очевидно.

У меня есть неизвестное количество элементов на странице, которые мне нужно прокручивать по одному за раз и делать вещи. Однако мне нужно, чтобы цикл останавливался до тех пор, пока функции, используемые для элементов, не завершились, а затем перейдем к следующей итерации.

Я пробовал делать это в цикле $.each, но он быстро удалил команды и закончил, не дожидаясь их завершения.

Любые идеи?

$('elem').each(function(){
    $(this).fadeIn().wait(5000).fadeOut();
});

Это то, что у меня есть, очень простое. Я получил функцию wait() отсюда: сайт кулинарной книги jQuery.

Проблема в том, что цикл не ждет - фактическая команда работает так, как предполагалось, просто, что все они уходят сразу.

Любая благодарность, спасибо.

EDIT: после того, как это будет выполнено, я могу снова выполнить цикл, так что список элементов будет снова исчезать в/из последовательности

EDIT2: с тех пор как получил 1.4.2 jQuery lib, использовал 1.3.2, следовательно, пользовательскую функцию wait(). Теперь используйте delay(), как указано lobstrosity. Управлял тем, что собирал что-то близкое к тому, что мне нужно от его ответа, благодаря лобстрости:).

Ответы

Ответ 1

Прежде всего, jQuery 1.4 добавил функцию delay, которую я предполагаю, это то, что делает ваша пользовательская реализация ожидания.

Используя задержку, вы можете подобрать подделку функциональности каждого элемента "Ожидание" на предыдущем элементе, чтобы завершить, используя первый параметр для каждого обратного вызова в качестве множителя для начальной задержки. Вот так:

var duration = 5000;

$('elem').each(function(n) {
    $(this).delay(n * duration).fadeIn().delay(duration).fadeOut();
});

Итак, первый элемент немедленно исчезнет. Второй будет исчезать через 5000 мс. Третья после 10 000 мс и так далее. Имейте в виду, что это притворяется. Каждый элемент на самом деле не ждет завершения предыдущего элемента.

Ответ 2

Ваш основной цикл с использованием each() будет запускаться без задержки по вашей коллекции элементов. Вам нужно ставить в очередь эти элементы.

Это может потребоваться настроить (и, возможно, использовать очереди jQuery?), но продемонстрировать использование рекурсии для обработки очереди:

function animate(elems) {
    var elem = elems.shift();
    $(elem).fadeIn().wait(5000).fadeOut(2000, function() {
        if (elems.length) {
            animate(elems);
        }
    });
}

var elems = $('elem');
animate(elems);

Ответ 3

Вероятно, вам нужно вызвать wait перед первой функцией:

  $(this).wait().fadeIn().wait(5000).fadeOut();

Другой вариант - использовать обратный вызов.

 $(this).wait().fadeIn('slow', function(){$(this).fadeOut('slow')});

Таким образом, fadeOut не запускается до тех пор, пока не будет выполнено fadeIn.

Ответ 4

Здесь представлена ​​демонстрация моего .

Что вам нужно, это не цикл для обработки обработки. Вы хотите связать звонки. Похоже, что может быть более простой способ, но здесь метод грубой силы.

// Create a function that does the chaining.
function fadeNext(x,y) {
  return function() { x.fadeIn(100).delay(100).fadeOut(1000, (y?y.fadeNext:y)); };
}

// Get all the elements to fade in reverse order.
var elements = [];
$('.f').each(function(i,e) {elements.unshift(e);});

// Iterate over the elements and configure a fadeNext for each.
var next;
for (var i in elements) {
  var e = $(elements[i]);
  e.fadeNext = fadeNext(e,next);
  next = e;
}

// Start the fade.
next.fadeNext();