lista - Controladores de eventos dentro de un bucle de Javascript: ¿necesita un cierre?

lista de eventos javascript

Question

Estoy trabajando con un poco de código html y Javascript que he tomado de otra persona. La página vuelve a cargar una tabla de datos (a través de una solicitud asincrónica) cada diez segundos, y luego vuelve a generar la tabla usando algún código DOM. El código en cuestión se ve así:

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

Sin embargo, cuando el evento onchange se activa para un elemento <select> , parece que se pasan los mismos valores al método onStatusChanged() para cada <select> en la tabla (he verificado que en cada iteración del ciclo, callid y anotherid reciben nuevos valores distintos).

Sospecho que esto ocurre debido a la naturaleza de cómo estoy configurando el controlador de eventos, con la select.onchange = function() . Si entiendo cómo funciona esto correctamente, esta sintaxis establece un cierre para que el evento onchange sea una función que hace referencia a estas dos referencias, que terminan teniendo un valor final de lo que sea que estén configuradas en la última iteración del ciclo. Cuando se callid el evento, el valor al que hace referencia callid y anotherid es el valor establecido en la última iteración, no el valor establecido en la iteración individual.

¿Hay alguna manera de que pueda copiar el valor de los parámetros que estoy pasando a onStatusChanged() ?

Cambié el título para reflejar mejor la pregunta y la respuesta aceptada.

Answer 1

De hecho, necesitas implementar un cierre aquí. Esto debería funcionar (avíseme, no lo probé)

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