Closure in Javascript [duplicate]

问题

Possible Duplicate:
Passing values to onclick

I have 100 elements with ids divNum0,...,divNum99. Each when clicked should call doTask with the right parameter.

The code below unfortunately does not close i, and hence doTask is called with 100 for all the elements.

function doTask(x) {alert(x);}

for (var i=0; i<100; ++i) {
    document.getElementById(\'divNum\'+i).addEventListener(\'click\',function() {doTask(i);},false);
}

Is there someway I can make the function called with right parameters?

回答1:

Although the (correct) answer is the duplicate, I'd like to point out a more advanced method - replacing loops with iterators, which effectively solves javascript "late-bound" closures problem.

loop = function(start, end, step, body) {
    for(var i = start; i != end; i += step)
       body(i)
}

loop(1, 100, 1, function(i) {
   // your binding stuff
})

回答2:

Create a closure via a self-executing function literal (or a named factory function)

function doTask(x) { alert(x); }

for(var i = 100; i--;) {
    document.getElementById('divNum' + i).onclick = (function(i) {
        return function() { doTask(i); };
    })(i);
}

or use the DOM node for information storage

function doTask() { alert(this.x); }

for(var i = 100; i--;) {
    var node = document.getElementById('divNum' + i);
    node.x = i;
    node.onclick = doTask;
}

The latter is more memory-friendly as no superfluous function objects are created.

来源：https://stackoverflow.com/questions/1734749/closure-in-javascript

标签

javascript

loops

greasemonkey

closures