setTimeout ne fonctionne pas avec jquery.chaque, c'

J'essaye d'ajouter un délai entre le jquery .removeClass appels tout en évoluant à travers les cellules d'un tableau. Les cellules affichent correctement sans setTimeout, mais avec setTimeout le code des pauses. Ce que je fais mal?

function reveal_board() {
$("td").each(function() {
    var t=setTimeout('$(this).removeClass("invisible")', 500);
});
}
InformationsquelleAutor valen | 2012-05-16
  1. 20

    Essayez ceci:

    function reveal_board() {
    $("div").each(function(index) {        
        (function(that, i) { 
            var t = setTimeout(function() { 
                $(that).removeClass("invisible"); 
            }, 500 * i);
        })(this, index);
    });
}

    C'est généralement une mauvaise pratique pour passer d'une chaîne à setTimeout() et aussi je ne pense pas que vous pouvez passer toutes les variables lors de l'utilisation de cette façon.

    J'ai aussi l'enveloppa d'une fermeture à s'assurer que that s'applique toujours à la droite de l'élément et n'est pas remplacé.

    Bien que, comme NiftyDude dit que vous pourriez vouloir passer dans l'index et de l'utiliser pour l'affichage de chaque élément à son tour.

    Exemple de travail - http://jsfiddle.net/Cc5sG/

    MODIFIER

    Dirait que vous n'avez pas besoin de la fermeture:

    function reveal_board() {
    $("div").each(function(index) {        
        var that = this;
        var t = setTimeout(function() { 
            $(that).removeClass("invisible"); 
        }, 500 * index);        
    });
}

    http://jsfiddle.net/Cc5sG/1/

    • Sry pour le modifier, j'ai accidentellement downvoted et a dû modifier afin que je puisse upvote de nouveau.
    InformationsquelleAutor Richard Dalton
  2. 2

    Votre this est dirigé vers le mondial window.

    function reveal_board() {
  $("td").each(function() {
    $this = $(this);
    var t=setTimeout(function(){$this.removeClass("invisible");}, 500);
  });
}
    InformationsquelleAutor xdazz
  3. 1

    Première chose d'abord, évitez d'utiliser de la ficelle pour le premier argument de setTimeout, utilisez anon fonction de la place car il est plus facile à déboguer et à maintenir:

    $("td").each(function() {
    var $this = $(this);
    var t=setTimeout(function() {
       $this.removeClass("invisible")
    }, 500);
});

    Aussi, je ne suis pas vraiment sûr de ce que vous essayez d'atteindre ici (mise à jour de votre question plus tard et je vais adapter ma réponse), mais si vous souhaitez supprimer invisible classe de chaque td 500 ms après l'un de l'autre, vous pouvez utiliser index:

    $("td").each(function() {
    var $this = $(this);
    var t=setTimeout(function(index) {
       $this.removeClass("invisible")
    }, 500 * (index+1));
});
    InformationsquelleAutor Andreas Wong
  4. 1

    Bien, j'ai eu le même problème et je l'ai résolu de cette façon... Mais je n'ai aucune idée sur les performances ou que ce soit, je l'ai utilisé dans un très court laps de boucle (10 éléments max) et il a parfaitement fonctionné ... Par la façon dont je l'ai utilisé pour ajouter une classe donc je vous laisse comprendre ce que cela donne pour supprimer une classe ;).

    var elements = $(".elements");
var timeout;

elements.each(function(e){
    timeout = setTimeout(function(index) {
       elements[elements.length-e-1].setAttribute('class', elements[elements.length-e-1].getAttribute('class')+' MY-NEW-CLASS');
    }, 500 * e);
});
    InformationsquelleAutor ZyDucksLover