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/