Jquery SetTimeout问题（我知道帖子已经存在......）

Question

我有一个包含一列和四行的表。每个tr都有一个名为'ligne'的类。我也有一个按钮。单击时，我想在类'ligne'上运行每个循环。对于每个项目，我想给出一个蓝色背景，但睡眠1秒后。我阅读了很多帖子，应用了我读过的内容，但它不起作用。希望有人能帮助我理解。干杯。马克

http://jsfiddle.net/M2ZCh/

我的HTML：

<table>
  <tr class="ligne">
    <td>one</td>
  </tr>
  <tr class="ligne">
    <td>two</td>
  </tr>
  <tr class="ligne">
    <td>three</td>
  </tr>
  <tr class="ligne">
    <td>four</td>
 </tr>
</table>

<input id="btn-timeout" type="submit" value="timeout!"/>

我的js：

$(document).on({
    click: function() {

        $(".ligne").each(function() {

            setTimeout(function() {

                $(this).css('background', 'blue');

            }, 1000);

        });


    }

}, "#btn-timeout");​

Answer 1

问题是this函数

中setTimeout的范围发生了变化

$(".ligne").each(function(index) {   
    var self = $(this); // reference for this
    setTimeout(function() {
        self.css('background', 'blue');
    }, 1000 * ++index);
});

这是一份工作副本： http://jsfiddle.net/M2ZCh/11/

Answer 2

你可以这样做，

$("#btn-timeout").click(function() {
    window.setTimeout(function () {
       $(".ligne").css("background","blue");
    }, 1000);
});

Demo

<强>更新

如果您希望每个框都改变背景，那么您必须改为使用setInterval()。

var tlenth = $(".ligne").length;
$("#btn-timeout").click(function() {
    var i = 0;
    var int = setInterval(function () {
       $(".ligne").eq(i).css("background","blue");
        i++;
        if(i>tlenth-1) { clearInterval(int); }
    }, 1000);
});

Demo

Answer 3

这是一个逐个突出显示每个单元格的版本：http://jsfiddle.net/M2ZCh/9/

$(document).on({
    click: function() {
        var index = 0;
        $(".ligne").each(function() {
            var obj = $(this); // pin reference to element

            setTimeout(function() {
                obj.css('background', 'blue');
            }, 1000 * ++index);
        });
    }
}, "#btn-timeout");​

Answer 4

我找到了解决问题的方法：

Here an example

问题在于

$(this).css('background', 'blue')没有引用html元素，因为它封装在setTimeout函数中。

所以你需要通过

来提取当前的html元素

var $this = $(this);

修改

我已经添加了jsFiddle下面的代码：

$(document).on({
click: function() {
    $(".ligne").each(function() {
        var $this = $(this);
        setTimeout(function() {
            $this.css('background', 'blue');
        }, 1000);
    });
 }
}, "#btn-timeout");

Answer 5

您的问题就在这一行$(this).css(...。您无法在this中使用setTimeout，因为它会引用document而不是您正在处理的实际元素。

试试这个。

    $(".ligne").each(function() {
        var el = $(this);
        setTimeout(function() {

            el.css('background', 'blue');

        }, 1000);

    });