JQuery'de, döngü devam etmeden önce her bir işlevin tamamlanmasını bekleyen bir döngü nasıl yazılır

Question

Bu durum açıksa lütfen beni affet.

Sayfada bilinmeyen miktarda öğe var, bir kerede bir tane arasında dolaşmam ve bir şeyler yapmam gerekiyor. Bununla birlikte, elemanlarda kullanılan işlevler tamamlanana kadar duraklatmak için döngüye ihtiyacım var ve daha sonra bir sonraki yinelemeye devam ediyorum.

Bunu bir $ .each döngüsünde yapmayı denedim, ancak komutları hızlı bir şekilde tamamladıktan sonra tamamlamayı beklemeden bitirdi.

Herhangi bir fikrin var mı?

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

Bu benim sahip olduğum şey, çok basit. Buradan wait() işlevini aldım: jquery cookbook site.

Sorun şu ki, döngüsü numaralı yordamı beklemez - asıl komut amaçlandığı gibi çalışır, yalnızca hepsi aynı anda gider.

Yardımlarınız için teşekkür ederiz.

DÜZENLEME: beri 1.4.2 jQuery aldınız mı: Bu yürütüldüğünde sonra elems listesi/tekrar dışarı sırayla

EDIT2 içinde soluk olacak, böylece daha sonra tekrar döngü yürütmek isteyebilir lib, 1.3.2, dolayısıyla özel wait() işlevini kullanıyordu. Şimdi, gecikme() ile belirtildiği gibi gecikme() kullanın. Cevabından ihtiyaç duyduğum şeye yakın bir şeyi bir araya getirmek için yönetilen, teşekkür lois :).

Answer 1

İlk, jQuery 1.4 varsayıyorum delay işlevini ekledi ne olduğunu özel bekleme uygulamanızın yapıyor. Bu gecikmeyi kullanarak

, sen sahte intial gecikme için bir çarpan olarak her callback'inde ilk parametresini kullanarak bitirmek için önceki elemana "bekleme" her elemanın işlevselliğini sıralayabilirsiniz. Şunun gibi:

var duration = 5000; 

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

Yani ilk unsur olacak hemen fadein. İkincisi 5.000 ms sonra sönecektir. 10.000 ms sonra üçüncü ve benzeri. Bunun sahte olduğunu unutmayın. Her eleman aslında bir önceki elemanın bitmesini beklemez.

Answer 2

Muhtemelen ilk fonksiyonu önce beklenecek çağırmanız gerekir:

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

Diğer seçenek geri arama kullanmaktır.

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

Bu şekilde fadeOut, fadeIn işlemi tamamlanana kadar başlatılmaz.

Answer 3

each() kullanarak ana döngünüz, öğeler koleksiyonunuz üzerinde gecikmeden çalışır. Bunun yerine bu elemanları sıraya almalısınız.

verdiği (ve muhtemelen jQuery sıraları kullanabilirsiniz?) Ama kuyruğu işlemek için özyineleme kullanarak göstermek gerekebilir Bu

: Herşeyden

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

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

Answer 4

İşte benim solution adresimin bir demosu.

İhtiyacınız olan şey işlemek için bir döngü değil. Ne istiyorsan çağrıları zincirlemek. Daha basit bir yol olabilir gibi görünüyor ama burada kaba kuvvet yöntemi.

// 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();