web-dev-qa-db-fra.com

Comment ajouter une pause entre chaque itération de jQuery .each ()?

Je récupère un tableau d'objets jQuery puis via .each () en modifiant chaque requête individuelle avec dans le tableau.

Dans ce cas, j'ai mis à jour les noms de classe pour déclencher une propriété -webkit-transition-property afin qu'elle utilise une transition CSS.

J'aimerais qu'il y ait une pause avant le début de chaque transition CSS. J'utilise ce qui suit, mais il n'y a pas de délai entre chaque mise à jour. Au lieu de cela, ils semblent tous se mettre à jour en même temps.

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

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

J'espérais que setTimeout résoudrait ce problème, mais cela ne semble pas fonctionner. Y a-t-il un moyen d'accomplir la pause avant chaque mise à jour du nom de CLASS de chaque objet?

jquerysettimeouteach
70
DA.

J'ai ajouté ceci en tant que commentaire, mais maintenant que je l'ai lu correctement et que j'ai répondu à ma propre question, cela fonctionnerait probablement:

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

  var time = 500;

  $cards.each(function() {
      setTimeout( function(){ addPositioningClass($(this)); }, time)
      time += 500;
  });
}
86
Rob

Désolé de retrouver un ancien fil de discussion, mais cette astuce pourrait être utile pour des problèmes similaires:

$cards.each(function(index) {
    $(this).delay(500*index).addClass('position');
});
49
johnjohn

Si vous créez une méthode qui s’appelle elle-même toutes les 500 ms, cette solution devrait être efficace. Le code suivant devrait fonctionner.

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

Testé sur violon: http://jsfiddle.net/jomanlk/haGfU/

9
JohnP

Que diriez-vous de . Delay () ?

ou

function addPositioningClasses($card){
  setTimeout(function() { $card.addClass('position')}, 1000);
}
3
diEcho

Essayez ceci:

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

Je serai honnête ... J'ai eu $ (this) .delay () mal conduit dans le passé dans certains cas et fonctionne parfaitement dans d'autres. Cependant, cela était normalement associé aux appels d'animation jQuery, pas à la manipulation d'attributs DOM.

Veuillez noter que .delay () ne fonctionne pas de la même manière que setTimeout. Pour plus d'informations, consultez la documentation jQuery .delay () .

Autant que je sache, $ (). Chacun s'exécute de manière procédurale, ainsi la prochaine itération de l'appel ne devrait commencer qu'après la fin de la précédente.

1
lsuarez

Si vous ne ciblez que Safari/iOS, en fonction de l’importance que vous accordez au contrôle du minutage exact des séquences d’animation, évitez peut-être toute solution impliquant des délais d'attente JS. Rien ne garantit que l'animation s'achèvera en même temps que le délai d'attente, en particulier sur les processeurs lents ou les machines sur lesquelles beaucoup de choses se passent en arrière-plan. Les versions ultérieures de webkit (y compris Safari mobile) autorisent les séquences d'animation chronométrées via @-webkit-keyframes. Webkit.org a un belle introduction . C'est en fait assez facile à mettre en œuvre.

1
Andrew

Check this out, a bien fonctionné pour moi! :)

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