setTimeout not working with jquery.each, this

Question

I'm trying to add a delay between the jquery .removeClass calls while iterating through the cells of a table. The cells display properly with no setTimeout, but with setTimeout the code breaks. What am I doing wrong?

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

Answer 1

Try this:

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

It's generally a bad practice to pass a string to setTimeout() and also I don't think you can pass any variables when using it that way.

I have also wrapped it in a closure to ensure that that always applies to the right element and is not replaced.

Although, like NiftyDude says you might want to pass in the index and use that to display each element in turn.

Working example - http://jsfiddle.net/Cc5sG/

EDIT

Looks like you don't need the closure:

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

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