Закрытие в Javascript

Question

Можно создать дубликат:
Passing values to onclick

У меня есть 100 элементов с идентификаторами divNum0, ..., divNum99. При каждом щелчке следует позвонить doTask с правильным параметром.

Код, к сожалению, не закрывает i, и, следовательно, doTask вызывается со 100 для всех элементов.

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

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

Есть ли каким-то образом я могу сделать функцию с именем с правильными параметрами?

Answer 1

Создать замыкание через самостоятельное выполнение функции буквальной (или именованную фабричную функцию)

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

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

или использовать узел DOM для хранения информации

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

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

Последнее больше памяти людей так как не создаются лишние объекты функции.

Answer 2

Хотя (правильный) ответ the duplicate, я хотел бы указать более продвинутый метод - замену циклов на итераторы, что эффективно решает проблему закрытых javascript «поздних границ».

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 
})