valor - alcance de las variables en las funciones de devolución de llamada de JavaScript
pasar variables entre funciones javascript (5)
Alternativa a la respuesta de SLaks
$(function() {
for (var i=0; i<2; i++) {
$.get(''http://www.google.com/'', function(i) {
return function() { alert(i); }
}(i));
}
});
Esperaba que el código de abajo alertara "0" y "1", pero alertaba "2" dos veces. No entiendo la razón. No sé si es un problema de jQuery. Además, ayúdame a editar el título y las etiquetas de esta publicación si son inexactas.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
for (var i=0; i<2; i++) {
$.get(''http://www.google.com/'', function() {
alert(i);
});
}
});
</script>
</head>
<body>
</body>
</html>
Estás compartiendo la única variable i entre todas las devoluciones de llamada.
Debido a que los cierres de Javascript capturan variables por referencia, las devoluciones de llamada siempre usarán el valor actual de i . Por lo tanto, cuando jQuery llama a las devoluciones de llamada después de que se ejecuta el bucle, siempre seré 2 .
Debe hacer referencia a i como el parámetro a una función separada.
Por ejemplo:
function sendRequest(i) {
$.get(''http://www.google.com/'', function() {
alert(i);
});
}
for (var i = 0; i < 2; i++) {
sendRequest(i);
}
De esta manera, cada devolución de llamada tendrá un cierre separado con un parámetro i separado.
Lo que está ocurriendo aquí es que su solicitud de AJAX $.get está completando después de que se complete el ciclo. Debido a esto, termino siendo la variable final que está configurada cuando se completan las iteraciones, siendo 2. Esto es solo una extraña secuencia de JavaScript, y no tiene nada que ver con jQuery.
Una cosa que puede hacer es poner en cola estas llamadas de forma asíncrona para que la iteración se detenga hasta que se complete la solicitud actual de AJAX. Si no quiere hacer eso, puede capturar la variable i en una function cierre en cada iteración.
Algo como esto:
for ( var i = 0; i < 2; i++ )
(function(iter){
$.get(''http://www.google.com/'', function(){
alert( iter );
});
})(i); // Capture i
Parece que ha creado un cierre dentro de su bucle. La Referencia de desarrolladores de Mozilla tiene una buena sección sobre esto.
Una solución alternativa a esto es tomar su devolución de llamada y, literalmente, convertirla en una función con nombre.
¿Por qué querría hacer esto?
Si una función está haciendo algo en el que una variable debe tener un nuevo alcance, entonces es probable que la función anónima justifique la creación de una nueva función. Esto también asegurará que la complejidad adicional no se introduzca en su código al tener que copiar variables o ajustar las devoluciones de llamada. Tu código seguirá siendo simple y auto descriptivo.
Ejemplo:
function getGoogleAndAlertIfSuccess(attemptNumber) {
$.get(''http://www.google.com/'', function() {
alert(attemptNumber);
});
}
function testGoogle() {
for (var i=0; i<2; i++) {
getGoogleAndAlertIfSuccess(i);
}
}