Javascript Settimeout Issue W/ For Loop

This is my function, when called the related node turns red and then does nothing. Here is the javascript: function blink (node, flickers) { originalColour = node.style.color;

Solution 1:

i is "i when the anonymous function is called" not "i when setTimeout is called".

You need to create a closure and pass the current value of i into it.

functionChangeColorLater(i) {
    returnfunction () {
        ChangeColor (node, (((i%2) == 0) ? (originalColour) : ('red')))
    }
}

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

Solution 2:

The problem is that at the time each timeout executes, i is equal to flickers * 2.

Using a closure, you can capture the value of i when the timeout is set, and pass that to your ChangeColor function. At the time the callback is executed, index (below) will equal the value of i at the time that the timeout was set.

What you want is:

functionblink (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 indexreturnfunction() {
                ChangeColor(node, (index % 2 == 0) ? originalColour : 'red');
            }
        }(i), i*200)
    }
}
functionChangeColor (node, color) {
    node.style.color = color;
}

Solution 3:

A bit easier to read. http://jsfiddle.net/wUkfe/22/

functionblink(node, flickers){

  var color = node.style.color;

  (functionblinker(){

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

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

  })();

}