jquery - setTimeout 不适用于 jquery.each，这

Question

我试图在遍历表的单元格时在 jquery .removeClass 调用之间添加延迟。单元格在没有 setTimeout 的情况下正确显示，但使用 setTimeout 时代码会中断。我究竟做错了什么？

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

Answer 1

试试这个：

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

将字符串传递给通常是一种不好的做法，setTimeout()而且我认为以这种方式使用它时不能传递任何变量。

我还将它包装在一个闭包中，以确保它that始终适用于正确的元素并且不会被替换。

虽然，就像 NiftyDude 说的那样，您可能希望传入索引并使用它来依次显示每个元素。

工作示例 - http://jsfiddle.net/Cc5sG/

编辑

看起来你不需要关闭：

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

您this指向全局window.

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

Answer 3

首先，避免对 的第一个参数使用字符串，setTimeout而是使用 anon 函数，因为它更易于调试和维护：

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

另外，我不确定您在这里要实现什么（稍后更新您的问题，我会调整我的答案），但是如果您想invisible从每td500 毫秒一个接一个地删除课程，您可以使用index：

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

Answer 4

好吧，我遇到了同样的问题，我用这种方式解决了它......但我不知道性能或其他什么，我在一个非常短的循环中使用它（最多 10 个元素）并且它工作得很好......我用它来添加一个类的方式，所以我会让你弄清楚它给删除一个类提供了什么;)。

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