Обработчики событий внутри цикла Javascript - нужно закрытие? - PullRequest
36 голосов
/ 04 декабря 2008

Я работаю с небольшим количеством HTML-кода и кода Javascript, который я перенял у кого-то другого. Страница перезагружает таблицу данных (через асинхронный запрос) каждые десять секунд, а затем перестраивает таблицу, используя некоторый код DOM. Рассматриваемый код выглядит примерно так:

var blah = xmlres.getElementsByTagName('blah');
for(var i = 0; i < blah.length; i++) {
    var td = document.createElement('td');
    var select = document.createElement('select');
    select.setAttribute("...", "...");
    select.onchange = function() {
        onStatusChanged(select, callid, anotherid);
    };
    td.appendChild(select);
}

Когда событие onchange запускается для элемента <select>, кажется, что в метод onStatusChanged() передаются одинаковые значения для каждого <select> в таблице (я проверял, что в каждом итерации цикла, callid и anotherid получают новые, различные значения).

Я подозреваю, что это происходит из-за того, как я устанавливаю обработчик событий с синтаксисом select.onchange = function(). Если я понимаю, как это работает правильно, этот синтаксис устанавливает закрытие для события onchange, чтобы быть функцией, которая ссылается на эти две ссылки, которые в конечном итоге имеют окончательное значение того, что они установлены на последней итерации цикла. Когда происходит событие, значение, на которое ссылаются callid и anotherid, является значением, установленным на последней итерации, а не значением, установленным на отдельной итерации.

Есть ли способ, которым я могу скопировать значение параметров, которые я передаю onStatusChanged()?

Я изменил название, чтобы лучше отразить вопрос и принятый ответ.

1 Ответ

50 голосов
/ 04 декабря 2008

Вам действительно нужно реализовать замыкание здесь. Это должно работать (дайте мне знать - я не проверял)

var blah = xmlres.getElementsByTagName('blah');
for(var i = 0; i < blah.length; i++) {
    var td = document.createElement('td');
    var select = document.createElement('select');
    select.setAttribute("...", "...");
    select.onchange = function(s,c,a)
    {
        return function()
        {
            onStatusChanged(s,c,a);
        }
    }(select, callid, anotherid);
    td.appendChild(select);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...