setTimeout and anonymous function problem

javascript

Solution

This should work:

for (var i = startOpacity; i <= endOpacity; i++) {
    (function(opacity) {
        setTimeout(function() {SetOpacity(eID, opacity);}, timer * 30);
    })(i);
    timer++;
}

This works as follows:

- inside the loop you create an anonymous function (`function(...){...}`) and immediately call it with a parameter (that's why there are parentheses around `function(){}`, so you can call it by adding `()` at the end and passing parameters)

- parameters passed to this anonymous function (in this case `i`, which is `opacity` inside the function) are local to this anonymous function, so they don't change during the next iterations of the loop, and you can safely pass them to another anonymous function (the first parameter in `setTimeout`)

Your original version didn't work because:

- your function that is passed to `setTimeout` holds a reference to the variable `i` (not the value of it), and it resolves its value only when this function is called, which is not at the time of adding it to `setTimeout`

- the value of this variable gets changed in the loop, and before even the first `setTimeout` executes, `i` will have reached `endOpacity` (the last value from the `for` loop)

Unfortunately JavaScript only has function scope, so it won't work if you create the variable inside the loop and assign a new actual value, because whenever there is some `var` inside a function, those variables are created at the time of function execution (and are `undefined` by default). The only (easy) way to create new scope is to create a function (which may be anonymous) and create new variables inside it (parameters are variables too).

Problem

This is my code, SetOpacity get invoked with wrong values, why? ``` function SetOpacity(eID, opacity){ eID.style.opacity = opacity / 100; eID.style.filter = 'alpha(opacity=' + opacity + ')'; } function fade(eID, startOpacity, endOpacity){ var timer = 0; if (startOpacity < endOpacity) { for (var i = startOpacity; i <= endOpacity; i++) { setTimeout(function() {SetOpacity(eID, i);}, timer * 30); timer++; } } } ```

Original source