JQuery SetTimeout проблема (я знаю, что сообщения уже существует ...)

Question

У меня есть таблица с одним столбцом и четырьмя строками.У каждого тр есть класс под названием '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

Вот версия, которая выделяет каждую ячейку одну за другой: 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 3

Вы можете сделать это, так как это

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

Демо

Обновление:

Если вы хотите каждыйТаким образом, вы можете использовать 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);
});

Демо

Answer 4

Я нашел решение для вашей проблемы:

Вот пример

Проблема заключалась в том, что

$(this).css('background', 'blue') нене ссылаются на элемент html, поскольку он инкапсулирован в функцию setTimeout.

Поэтому вам нужно извлечь текущий элемент html, выполнив

var $this = $(this);

EDIT:

Я добавил код из 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);

    });