valor - pasar variable de javascript a html

¿Cómo paso el valor(no la referencia) de una variable JS a una función?

Question

Esta pregunta ya tiene una respuesta aquí:

• Cierre de JavaScript dentro de los bucles - ejemplo práctico simple 35 respuestas

Aquí hay una versión simplificada de algo que estoy tratando de ejecutar:

for (var i = 0; i < results.length; i++) {
marker = results[i];
google.maps.event.addListener(marker, ''click'', function() {
change_selection(i);
});
}

pero descubro que cada oyente usa el valor de results.length (el valor cuando termina el ciclo for). ¿Cómo puedo agregar oyentes de modo que cada uno use el valor de i en el momento en que lo agregue, en lugar de la referencia a i?

Answer 1

Además de los cierres, puedes usar function.bind :

google.maps.event.addListener(marker, ''click'', change_selection.bind(null, i));

pasa el valor de i en como argumento a la función cuando se llama. ( null es para enlazar this , que no necesita en este caso).

function.bind fue introducido por el framework Prototype y ha sido estandarizado en ECMAScript Fifth Edition. Hasta que los navegadores lo admitan de forma nativa, puede agregar su propio soporte de function.bind utilizando cierres:

if (!(''bind'' in Function.prototype)) {
Function.prototype.bind= function(owner) {
var that= this;
var args= Array.prototype.slice.call(arguments, 1);
return function() {
return that.apply(owner,
args.length===0? arguments : arguments.length===0? args :
args.concat(Array.prototype.slice.call(arguments, 0))
);
};
};
}

Answer 2

Creo que podemos definir una variable temporal para almacenar el valor de i.

for (var i = 0; i < results.length; i++) {
var marker = results[i];
var j = i;
google.maps.event.addListener(marker, ''click'', function() {
change_selection(j);
});
}

Aunque no lo he probado.

Answer 3

Debe crear un ámbito separado que guarde la variable en su estado actual pasándola como un parámetro de función:

for (var i = 0; i < results.length; i++) {
(function (i) {
marker = results[i];
google.maps.event.addListener(marker, ''click'', function() {
change_selection(i);
});
})(i);
}

Al crear una función anónima y llamarla con la variable como primer argumento, está pasando por valor a la función y creando un cierre.

Answer 4

Estás terminando con un cierre. Aquí hay un artículo sobre cierres y cómo trabajar con ellos. Vea el Ejemplo 5 en la página; ese es el escenario con el que estás lidiando.

EDITAR: Cuatro años después, ese enlace está muerto. La raíz del problema anterior es que el bucle for formularios cierra (específicamente en marker = results[i] ). Cuando se pasa el marker a addEventListener , se ve el efecto secundario del cierre: el "entorno" compartido se actualiza con cada iteración del ciclo, antes de que finalmente se "guarde" a través del cierre después de la iteración final. MDN lo explica muy bien.

Answer 5

cierres

for (var i = 0, l= results.length; i < l; i++) {
marker = results[i];
(function(index){
google.maps.event.addListener(marker, ''click'', function() {
change_selection(index);
});
})(i);
}

EDITAR, 2013: ahora se conocen comúnmente como IIFE

Answer 6

for (var i = 0; i < results.length; i++) {
marker = results[i];
google.maps.event.addListener(marker, ''click'', (function(i) {
return function(){
change_selection(i);
}
})(i));
}