setTimeout no funciona con jquery.each, este

Question

Estoy tratando de agregar un retraso entre las llamadas a jquery .removeClass mientras recorro las celdas de una tabla. Las celdas se muestran correctamente sin setTimeout, pero con setTimeout el código se rompe. ¿Qué estoy haciendo mal?

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

Answer 1

Prueba esto:

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

Por lo general es una mala práctica para pasar una cadena a setTimeout() y también creo que no se puede pasar cualquier variable cuando se utiliza de esa manera.

También lo he envuelto en un cierre para asegurar que that siempre se aplica al elemento correcto y no se reemplaza.

Aunque, como NiftyDude dice que puede querer pasar el índice y usarlo para mostrar cada elemento uno a uno.

Ejemplo de trabajo - http://jsfiddle.net/Cc5sG/

EDITAR

Parece que no es necesario el cierre:

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

Primero lo primero, evitar el uso de cuerdas para el primer argumento de setTimeout, utilice la función anon lugar, ya que es más fácil de depurar y mantener:

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

Además, no estoy realmente seguro de lo que están tratando de lograr aquí (para actualizar la pregunta más adelante y voy a adaptar mi respuesta), pero si se desea eliminar invisible clase a partir de cada uno td 500 ms después entre sí, puede utilizar index:

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

Answer 3

Su this apunta al global window.

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

Answer 4

Bueno, he tenido el mismo problema y lo resolví de esa manera ... Pero no tengo idea de las actuaciones o lo que sea, lo usé en un ciclo muy corto (10 elementos como máximo) y funcionó a la perfección ... Por cierto, lo usé para agregar una clase, así que te dejaré descubrir qué ofrece para eliminar una clase;).

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