Javascript setTimeout проблема с циклом

Question

Это моя функция, при вызове связанный узел становится красным, а затем ничего не делает.
Вот код JavaScript:

function blink (node, flickers)
{
    originalColour = node.style.color;
    for (i = 1; i <= (flickers*2); i++)
        {
        setTimeout (function () {ChangeColor (node, (((i%2) == 0) ? (originalColour) : ('red')))}, (i*200));
        }
}
function ChangeColor (node, color) 
{
    node.style.color = color;
}

Answer 1

i - это "i, когда анонимная функция называется" не "i, когда вызывается setTimeout".

Вам необходимо создать замыкание и передать текущее значение i в него.

function ChangeColorLater(i) {
    return function () {
        ChangeColor (node, (((i%2) == 0) ? (originalColour) : ('red')))
    }
}

setTimeout (ChangeColourLater(i), (i*200));

Answer 2

Проблема в том, что во время каждого тайм-аута i равно мерцанию * 2.

Используя замыкание, вы можете зафиксировать значение i, когда тайм-аут установлен, и передать его вашемуФункция ChangeColor.Во время выполнения обратного вызова индекс (ниже) будет равен значению i во время установки времени ожидания.

То, что вы хотите:

function blink (node, flickers) {
    var originalColour = node.style.color;
    for (var i = 1; i <= (flickers*2); i++) {
        setTimeout (function (index) { // current value for i in loop becomes var index
            return function() {
                ChangeColor(node, (index % 2 == 0) ? originalColour : 'red');
            }
        }(i), i*200)
    }
}
function ChangeColor (node, color) {
    node.style.color = color;
}

Answer 3

Немного легче читать.http://jsfiddle.net/wUkfe/22/

function blink(node, flickers){

  var color = node.style.color;

  (function blinker(){

    node.style.color = (flickers % 2) ?  "red" : color;

    if (flickers--){
      setTimeout(blinker, 1000);
    }

  })();

}