Wie füge ich eine Pause zwischen jeder Iteration von jQuery .each () hinzu?

80

Ich greife nach einem Array von jQuery-Objekten und ändere dann über .each () jede einzelne jquery mit im Array.

In diesem Fall habe ich die Klassennamen aktualisiert, um eine -webkit-Transition-Eigenschaft auszulösen und einen CSS-Übergang zu verwenden.

Ich möchte, dass vor jedem CSS-Übergang eine Pause eingelegt wird. Ich verwende Folgendes, aber es gibt keine Verzögerung zwischen den einzelnen Updates. Stattdessen scheinen sie alle gleichzeitig aktualisiert zu werden.

function positionCards() {
  $cards = $('#gameboard .card');
  $cards.each(function() {
      setTimeout( function(){ addPositioningClass($(this)); }, 500 )
  });
}

function addPositioningClasses($card){
  $card
    .addClass('position')
}

Ich hatte gehofft, setTimeout würde das lösen, aber es scheint nicht zu funktionieren. Gibt es eine Möglichkeit, die Pause vor jeder Aktualisierung des Klassennamens jedes Objekts zu erreichen?

DA.
quelle
Versuchen Sie, Anführungszeichen um die Funktion addPositioningClass zu verwenden, wie folgt: setTimeout ('addPositioningClass ($ (this))', 500)
amosrivera
1
Könnten Sie das Zeitlimit für jede Iteration erhöhen, sagen wir 500.1000.1500 ...
Rob

Antworten:

95

Ich habe dies als Kommentar hinzugefügt, aber jetzt, da ich es richtig gelesen und meine eigene Frage beantwortet habe, würde dies wahrscheinlich funktionieren:

function positionCards() {
  var $cards = $('#gameboard .card');

  var time = 500;

  $cards.each(function() {
      setTimeout( function(){ addPositioningClass($(this)); }, time)
      time += 500;
  });
}
rauben
quelle
1
Wie unterscheidet sich Ihr Code vom OP? Es gibt einen Bereichsfehler, weil addPositioningClassesnicht im Kontext vonsetTimeout
JohnP
@JohnP - @DA gibt an, dass der Code funktioniert, aber dass alle Elemente gleichzeitig positioniert sind. Mir war nicht bewusst, dass der Umfang der Funktion Teil des Problems war ...
Rob
1
Ich habe es nur in einer Geige versucht und es funktioniert nicht. Ich kann mich irren, aber ich kann nicht sehen, wie dieser Code überhaupt funktionieren kann.
JohnP
2
@JohnP - @DA sagte -> "Ich verwende Folgendes, aber es gibt keine Verzögerung zwischen den einzelnen Updates. Stattdessen scheinen alle auf einmal aktualisiert zu werden."
Rob
2
Lösung: die auch in diesem Git vorhanden ist: gist.github.com/Zackio/7648481
Pranesh Janarthanan
49

Es tut mir leid, dass Sie einen alten Thread ausgegraben haben, aber dieser Tipp kann bei ähnlichen Problemen hilfreich sein:

$cards.each(function(index) {
    $(this).delay(500*index).addClass('position');
});
John John
quelle
6
Beachten Sie, dass delaydies nur für die Animationswarteschlange gedacht ist und nicht funktioniert, z. B. css()(siehe hier )
Yan Foto
19
Sie müssen .queue()(und .dequeue()) verwenden, wenn Sie verzögern .addClass():$(this).delay(500*index).queue(function() { $(this).children('.flipcontainer').addClass('visible').dequeue(); });
aksu
1
@aksu Du solltest kopieren, was du dort hast, und daraus eine Antwort machen, da es in den Kommentaren verloren geht und deine Antwort mir geholfen hat, dass es richtig funktioniert.
Adamj
10

Wenn Sie eine Methode erstellen, die sich alle 500 ms selbst aufruft, sollte dies dieser Trick sein. Der folgende Code sollte funktionieren.

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)
    }
}

Auf Geige getestet: http://jsfiddle.net/jomanlk/haGfU/

JohnP
quelle
Ich muss .push () noch etwas genauer untersuchen. Das war mir nicht bewusst!
DA.
3

Wie wäre es mit .delay () ?

oder

function addPositioningClasses($card){
  setTimeout(function() { $card.addClass('position')}, 1000);
}
diEcho
quelle
Das wundere ich mich auch immer, aber bis heute habe ich keinen Kontext gefunden, in dem diese Methode angewendet werden kann.
Sandwich
3
Nach allem, was ich sagen kann, gilt delay () nur für jQuery-Animationen.
DA.
1

Wenn Sie nur auf Safari / iOS abzielen, sollten Sie möglicherweise eine Lösung mit JS-Zeitüberschreitungen vermeiden, je nachdem, wie wichtig es für Sie ist, das genaue Timing von Animationssequenzen zu steuern. Es gibt keine Garantie dafür, dass die Animation gleichzeitig mit der Zeitüberschreitungsverzögerung abgeschlossen wird, insbesondere auf langsamen Prozessoren oder Maschinen, auf denen im Hintergrund viel los ist. Spätere Versionen des Webkits (einschließlich mobiler Safari) ermöglichen zeitgesteuerte Animationssequenzen über @-webkit-keyframes. Webkit.org hat eine nette Einführung . Es ist eigentlich ziemlich einfach zu implementieren.

Andrew
quelle
Ich ziele in der Tat nur auf iOS (es ist eine App). Ich plane nicht die Animationssequenz, sondern die Wartezeit bis zur Aktualisierung des Klassennamens, was dann wiederum eine Webkit-Übergangs-CSS auslöst.
DA.
1

Probieren Sie es aus:

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

Ich bin ehrlich ... Ich habe $ (this) .delay () in der Vergangenheit in bestimmten Fällen schlecht benommen und in anderen fehlerfrei gearbeitet. Dies geschah jedoch normalerweise in Verbindung mit jQuery-Animationsaufrufen und nicht mit der Manipulation von DOM-Attributen.

Bitte beachten Sie, dass .delay () nicht wie setTimeout funktioniert. Weitere Informationen finden Sie in der Dokumentation zu jQuery .delay () .

Soweit mir bekannt ist, wird $ (). Jeder prozedural ausgeführt, sodass die nächste Iteration des Aufrufs erst beginnen sollte, nachdem die vorherige abgeschlossen wurde.

lsuarez
quelle
Ich kann mich irren, aber beim Lesen der jquery-Dokumentation sieht es so aus, als würde eine Verzögerung nur dazu dienen, jQuery-Animationen zu verzögern. Ich denke, Sie haben auch in diesem letzten Absatz Recht. Die Sache war, dass ich den Funktionsaufruf, der die Klasse festlegte, nicht verzögerte, sondern verzögerte, wann die Klasse gesetzt werden würde. Daher wurde die Verzögerung auf alle 30 Elemente gleichzeitig angewendet, und alle verzögerten dann dieselbe Zeitdauer.
DA.
0

Schau dir das an, hat gut für mich funktioniert! :) :)

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

Mit diesem Code wird die Anfangsverzögerung auf 50 ms eingestellt. Dann wird für jede Schleife durch die ".row" -Klasse eine zusätzliche Verzögerung von 200 ms hinzugefügt. Dies erzeugt einen schönen verzögerten Show-Effekt für jede Zeile.

$( 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;
    });
});
LeeF
quelle
6
Es ist am besten, wenn Sie einen Kommentar hinzufügen und nicht nur Code da draußen werfen.
woot