Cosas extrañas en JavaScript "para"

Question

Estoy usando jQuery y tengo una cosa extraña que no entiendo. Tengo algo de código:

for (i = 1; i <= some_number; i++) { 
    $("#some_button" + i).click(function() { 
     alert(i); 
    }); 
} 

"#some_button", como su nombre lo dice - son algunos botones. Cuando se hace clic en ellos, deben aparecer un cuadro con su número, ¿correcto? Pero ellos no. Si hay 4 botones, siempre aparecen "5" (los botones cuentan +1). ¿Por qué es así?

Answer 1

Tiene que ver con el alcance de JavaScript. Puede moverse con facilidad mediante la introducción de otro ámbito mediante la adición de una función y tener esa función llama a sí mismo y pase en i:

for (var i = 1; i <= some_number; i++) { 
    (function(j) { 
    $("#some_button" + j).click(function() { 
     alert(j); 
    }); 
    })(i); 
} 

Esto crea un cierre - cuando la función interna tiene acceso a un ámbito que ya no existe cuando se llama a la función. Consulte this article en el MDC para obtener más información.

EDIT: RE: Funciones de auto llamada: una función de auto llamada es una función que se llama de forma anónima. No lo instancias ni lo asignas a una variable. Se toma la forma siguiente (tenga en cuenta los parens de apertura):

(function(args) { 
    // function body that might modify args 
})(args_to_pass_in); 

Relacionando esto con la pregunta, el cuerpo de la función anónima sería:

$("#some_button" + j).click(function() { 
    alert(j); 
}); 

Combinando estos juntos, obtenemos la respuesta en el primer bloque de código La función de auto-llamada anónima espera un argumento llamado j. Busca cualquier elemento con una identificación de some_button con el valor entero de j al final (por ejemplo, some_button1, some_button10). Cada vez que se hace clic en uno de estos elementos, se alerta el valor de j. La penúltima línea de la solución pasa en el valor i, que es el contador de bucles donde se llama a la función de auto-llamada anónima. Hecho de otra manera, podría tener este aspecto:

var innerFunction = function(j) { 
    $("#some_button" + j).click(function() { 
    alert(j); 
    }); 
}; 

for (var i = 1; i <= some_number; i++) { 
    innerFunction(i); 
} 

Answer 2

Usted está teniendo a very common closure problem en el bucle for.

Las variables incluidas en un cierre comparten el mismo entorno individual, por lo que cuando se llame al click, el ciclo habrá seguido su curso y la variable i se mantendrá hacia la última entrada.

Puede resolver esto con incluso más cierres, utilizando una fábrica de función:

function makeOnClickCallback(i) { 
    return function() { 
     alert(i); 
    }; 
} 

var i; 

for (i = 0; i < some_number; i++) { 
    $("#some_button" + i).click(makeOnClickCallback(i)); 
} 

Este puede ser un tema bastante complicado, si usted no está familiarizado con el funcionamiento de los cierres. Usted puede comprobar hacia fuera el siguiente artículo de Mozilla para una breve introducción:

• Working with Closures

Answer 3

(function (some_number) { 
    for (i = 1; i <= some_number; i++) { 
     $("#some_button" + i).click(function() { 
     alert(i); 
     }); 
    } 
    })(some_number); 

englobar la función exterior porque para la velocidad y el hecho de que voy a volver a activar siempre.

Answer 4

Debido a que en el momento de hacer clic en ellos, i == 5.

Answer 5

Esto es debido a cómo funcionan los cierres en JavaScript.Cada una de las 5 funciones que está creando básicamente está compartiendo la misma variable i. El valor de i dentro de su función no se evalúa cuando crea la función, pero cuando ocurre el evento click, cuando el valor de i es 5.

Existen varias técnicas para evitar esto (cuando esto comportamiento no es lo que quieres). Uno (si tiene una función simple, como se hace aquí) es utilizar el constructor de funciones en lugar de un literal de función:

$("#some_button" + i).click(new Function("alert("+i+")"); 

Answer 6

Este es un código muy inteligente. Tan inteligente que es una pregunta en SO. :) Dejé de lado la cuestión por completo, embruteciendo el código, solo para tener la oportunidad de entenderlo (o hacer que un colega lo entienda) dentro de seis meses. Los cierres tienen su lugar, pero en este caso los evitaría en favor de un código más comprensible.

Probablemente, me atribuyo la misma función a todos los botones, que recibirían el botón del evento, la tira "some_button" de la ID, y alertar al resultado. No es tan bonito, pero les garantizo que todos en la oficina podrían seguirlo de un vistazo.