Как записать цикл в jQuery, который ожидает каждой функции для завершения прежде, чем продолжить цикл
Простите мне, если это - очевидное.
У меня есть неизвестная сумма элементов на странице, которую я должен циклично выполнить через по одному и действительно наполняю к. Однако мне нужен цикл для приостановки, пока функции не использовали на элементах, завершились и затем продвигаются к следующему повторению.
Я пытался делать это в $ .each цикл, но он исчерпал команды далеко к быстро и закончился, не ожидая их для завершения.
Какие-либо идеи?
$('elem').each(function(){
$(this).fadeIn().wait(5000).fadeOut();
});
Это - то, что я имею, очень простой. Я получил ожидание () функция отсюда: сайт поваренной книги jQuery.
Проблема, цикл не ожидает - фактические работы команды, как предназначено, это просто, что они все уходят сразу.
Любая ценившая справка, спасибо.
Править: После того, как это выполняется, я могу хотеть затем выполнить цикл снова, так, чтобы список elems постепенно появился / снова в последовательности
EDIT2: с тех пор получили 1.4.2 lib jQuery, использовал 1.3.2, следовательно пользовательское ожидание () функция. Теперь с помощью задержки (), как упомянуто lobstrosity. Управляемый, чтобы починить что-то близко к то, в чем я нуждаюсь из его ответа, благодарит lobstrosity :).
4 ответа
Прежде всего, jQuery 1.4 добавил функцию delay , которая, как я полагаю, является тем, что делает ваша реализация пользовательского ожидания.
Используя задержку, вы можете как бы имитировать функциональность каждого элемента, «ожидающего» завершения предыдущего элемента, используя первый параметр каждого обратного вызова в качестве множителя для начальной задержки. Примерно так:
var duration = 5000;
$('elem').each(function(n) {
$(this).delay(n * duration).fadeIn().delay(duration).fadeOut();
});
Итак, первый элемент немедленно исчезнет. Второй исчезнет через 5000 мс. Третий через 10 000 мс и так далее. Имейте в виду, что это подделка. Фактически, каждый элемент не ожидает завершения предыдущего элемента.
Ваш основной цикл, использующий 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);
Вероятно, вам нужно вызвать ожидание перед первой функцией:
$(this).wait().fadeIn().wait(5000).fadeOut();
Другой вариант - использовать обратный вызов.
$(this).wait().fadeIn('slow', function(){$(this).fadeOut('slow')});
Таким образом, fadeOut не запускается, пока не завершится fadeIn.
Вот демонстрация моего решения .
Вам нужен не цикл для обработки обработки. Вы хотите объединить звонки в цепочку. Похоже, что может быть более простой способ, но вот метод грубой силы.
// 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();