Führt die Methode .each() von jQuery ihre Anweisungen parallel oder sequenziell aus?

Question

In meiner HTML-Seite Ich habe 4 Listenelemente und den folgenden jQuery-Code:

$('li').hide().each(function() { 
    $(this).delay(500).fadeIn(1000); 
}); 

ich, dass die Aussage in der .each() Funktion angenommen würde für das erste Listenelement ausgeführt werden, abgeschlossen und dann würde laufen für den zweiten Listeneintrag usw.

Alle vier Listenelemente werden jedoch genau zur gleichen Zeit eingeblendet. Bedeutet das, dass die Anweisung für alle Listenelemente parallel ausgeführt wird?

Gibt es eine Möglichkeit, die Listenelemente nacheinander zu einblenden?

Answer 1

Sie laufen sequenziell, Ihr Beispiel gibt nur die Illusion, dass sie zur gleichen Zeit wegen Ihrer Verwendung von delay/fadeIn ausgeführt werden. Was Sie tun möchten, ist die Verkettung der einzelnen Elemente, so dass das nächste Element nur dann ausgeblendet wird, wenn das vorherige fertig ist. Sie können etwas tun:

$(this).delay(500).fadeIn(1000, function() { 
     // Fade the next li... 
    }); 

Natürlich würde dies für Ihr spezifisches Codebeispiel oben nicht (Sie wahrscheinlich des .each erhalten wollen würden zu befreien und jedes li Element innerhalb eine andere Art und Weise erhalten die komplette Callback-Funktion)

Answer 2

Da die Animationen asynchron sind, wartet die Schleife für jede nicht abgeschlossen ist, bevor zum nächsten Iteration fortgesetzt

die Schleife nur wenige Millisekunden vollendet in wird so jedes Element hat gleiche visuelle verzögern.

zu erhöhen, ist die einfachste der Schleifenindex als Multiplikator zu verwenden, so effektiv werden sie alle

$('li').hide().each(function(i) { 
    // "i" is array index of current instance 
    // delays will thus be 0*500 ... 1*500 .... n*500 
    $(this).delay(i*500).fadeIn(1000); 
}); 

Answer 3

Sie .queue(), .dequeue(), .next() Funktionen in nacheinander aufrufen versetzt werden

$("li").hide().queue(function() { 
 
    $(this).delay(500).fadeIn(1000, $.proxy($.fn.dequeue, $(this).next())) 
 
}).first().dequeue()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<ul> 
 
    <li>a</li> 
 
    <li>b</li> 
 
    <li>c</li> 
 
    <li>d</li> 
 
</ul>

verwenden können