setTimeout ne fonctionne pas avec jquery.each, ceci

Question

J'essaie d'ajouter un délai entre les appels jquery .removeClass lors de l'itération dans les cellules d'un tableau. Les cellules s'affichent correctement sans setTimeout, mais avec setTimeout, le code se casse. Qu'est-ce que je fais de mal ?

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

Answer 1

Essayez ça :

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 de passer une chaîne de caractères à setTimeout() et je ne pense pas non plus que vous puissiez passer des variables en l'utilisant de cette façon.

Je l'ai également enveloppé dans une fermeture pour m'assurer que that s'applique toujours au bon élément et n'est pas remplacé.

Cependant, comme le dit NiftyDude, vous pourriez vouloir passer dans l'index et l'utiliser pour afficher chaque élément tour à tour.

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

EDIT

On 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/

Answer 2

Su this est pointé vers le fichier global window .

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

Answer 3

Tout d'abord, évitez d'utiliser une chaîne pour le premier argument de l'option setTimeout Si vous avez un problème avec la fonction anon, utilisez-la à la place car elle est plus facile à déboguer et à maintenir :

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

De plus, je ne suis pas vraiment sûr de ce que vous essayez d'obtenir ici (mettez à jour votre question plus tard et j'adapterai ma réponse), mais si vous voulez supprimer invisible de chaque classe td 500 ms après l'autre, vous pouvez utiliser index :

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

Answer 4

Eh 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 des performances ou autre, je l'ai utilisé dans une boucle très courte (10 éléments max) et ça a parfaitement fonctionné ... D'ailleurs je l'ai utilisé pour ajouter une classe donc je vous laisse imaginer ce que ça 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);
});