setTimeout funktioniert nicht mit jquery.each, das

Question

Ich versuche, eine Verzögerung zwischen den jquery .removeClass-Aufrufe während der Iteration durch die Zellen einer Tabelle hinzuzufügen. Die Zellen werden ordnungsgemäß ohne setTimeout angezeigt, aber mit setTimeout bricht der Code ab. Was mache ich falsch?

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

Answer 1

Versuchen Sie folgendes:

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

Es ist generell eine schlechte Praxis eine Zeichenfolge setTimeout() passieren und auch alle Variablen passieren kann ich nicht denken, Sie, wenn es auf diese Weise verwendet wird.

Ich habe es auch in einen Verschluss gewickelt, um sicherzustellen, dass that immer für das richtige Element gilt und nicht ersetzt wird.

Obwohl, wie NiftyDude sagt, möchten Sie möglicherweise den Index weitergeben und damit jedes Element der Reihe nach anzeigen.

Arbeitsbeispiel - http://jsfiddle.net/Cc5sG/

EDIT

Sieht aus wie Sie den Verschluss nicht brauchen:

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

Das erste, was zunächst vermeiden für das erste Argument von setTimeout, verwenden Anon-Funktion statt, da es einfacher ist, zu debuggen und pflegen mit string:

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

Auch ich bin nicht wirklich sicher, was Sie versuchen, hier (aktualisieren Sie Ihre Frage später, und ich werde meine Antwort anzupassen) zu erreichen, aber wenn Sie invisible Klasse von jedem td 500 ms nach einander entfernen möchten, können Sie index:

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

Answer 3

Ihre this verweist auf die globale window.

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

Answer 4

Nun, ich habe das gleiche Problem hatte und ich habe es so gelöst ... Aber ich habe keine Ahnung von den Aufführungen oder was auch immer, ich habe es benutzt in einer sehr kurzen Schleife (10 Elemente maximal) und es hat perfekt funktioniert ... Übrigens habe ich es verwendet, um eine Klasse hinzuzufügen, damit ich dir sagen kann, was es gibt, um eine Klasse zu entfernen;).

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