Question

I am trying to undrstand the code

for(var i = 0; i < 10; i++) {
    setTimeout((function(e) {
        return function() {
            console.log(e);
        }
    })(i), 1000)
}

from here http://bonsaiden.github.com/JavaScript-Garden/#function.closures

I understood this method :

for(var i = 0; i < 10; i++) {
    (function(e) {
        setTimeout(function() {
            console.log(e);  
        }, 1000);
    })(i);
}

Can anyone please help me by explaining the first one?

I will try to explain how I understands the first one,

first i is 0,
setTimeout is called,
self calling function "function(e)" is called with i=0,
Im stuck!! what happens when this function returns a function?

Answer 1

“Can you please check the updated question specifying where im getting confused”

OK, here’s the long explanation. Remember that the first parameter to setTimeout() needs to be a reference to the function that you want executed after the specified delay. The simplest case is to just name a function defined elsewhere:

function someFunc() {
   console.log("In someFunc");
}

setTimeout(someFunc, 100);

Note there are no parentheses on someFunc when passing it as a parameter to setTimeout because a reference to the function itself is required. Contrast with:

setTimeout(someFunc(), 100);   // won't work for someFunc() as defined above

With parenthese it calls someFunc() and passes its return value to setTimeout. But my definition of someFunc() above doesn’t explictly return a value, so it implicitly returns undefined – which is like saying setTimeout(undefined, 100).

But it would work if changed someFunc() to return a function instead of returning undefined:

function someFunc() {
   return function() {
      console.log("In the function returned from someFunc");
   };
}

So now (at last) we come to the code from your question:

setTimeout((function(e) {
    return function() {
        console.log(e);
    }
})(i), 1000)

Instead of referencing a function by name and calling it as someFunc(i) it defines an anonymous function and calls it immediately as (function(e) {})(i). That anonymous function returns another function and it is that returned function that becomes the actual parameter to setTimeout(). When the time is up it is that returned function that will be executed. Because the (inner) function being returned is defined in the scope of the (outer) anonymous function it has access to the e parameter.