Strange cose in JavaScript "per"

Question

Sto usando jQuery e ho una cosa strana che non capisco. Ho qualche codice:

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

"#some_button", come dice il nome - sono alcuni pulsanti. Quando cliccato dovrebbero apparire una casella con il suo numero, corretto? Ma loro non lo fanno. Se sono presenti 4 pulsanti, pop-up sempre "5" (i pulsanti contano + 1). Perchè è così?

Answer 1

Ha a che fare con lo scoping di JavaScript. Si può aggirare facilmente con l'introduzione di un altro ambito con l'aggiunta di una funzione e avere quella funzione stessa chiamata e passare in i:

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

questo modo si crea una chiusura - quando la funzione interna ha accesso a un ambito che non esiste più quando viene chiamata la funzione. Vedere this article su MDC per ulteriori informazioni.

MODIFICA: RE: Funzioni di auto-chiamata: una funzione di auto-chiamata è una funzione che si chiama in modo anonimo. Non lo si istanzia e non lo si assegna a una variabile. Esso ha la seguente forma (notare le parentesi di apertura):

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

Relativamente questo alla domanda, il corpo della funzione anonima sarebbe:

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

Combinando questi insieme, si ottiene la risposta in il primo blocco di codice. La funzione di auto-chiamata anonima si aspetta un argomento chiamato j. Cerca qualsiasi elemento con un id di some_button con il valore intero di j alla fine (ad esempio some_button1, some_button10). Ogni volta che si fa clic su uno di questi elementi, viene segnalato il valore di j. La penultima riga della soluzione passa nel valore i, che è il contatore di loop in cui viene chiamata la funzione di auto-chiamata anonima. Fatto un altro modo, potrebbe assomigliare a questo:

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

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

Answer 2

Si stanno avendo a very common closure problem nel ciclo for.

Le variabili racchiuse in una chiusura condividono lo stesso singolo ambiente, quindi quando viene chiamato il callback click, il ciclo avrà corso e la variabile i rimarrà puntata all'ultima voce.

si può risolvere questo con ancora più chiusure, utilizzando una funzione di fabbrica:

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

var i; 

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

Questo può essere un bel argomento difficile, se non si ha familiarità con il modo chiusure funzionano. Si può verificare il seguente articolo di Mozilla per una breve introduzione:

• Working with Closures

Answer 3

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

Avvolgere la funzione di fuori, perché per la velocità e il fatto che io manterrò il ripristino.

Answer 4

Perché nel momento in cui si fa clic su di loro, i == 5.

Answer 5

Questo è a causa di come funzionano le chiusure in JavaScript.Ciascuna delle 5 funzioni che stai creando condivide fondamentalmente la stessa variabile i. Il valore della i all'interno della vostra funzione non è in corso di valutazione quando si crea la funzione, ma quando si verifica l'evento click, quando ormai il valore di i è 5.

Ci sono varie tecniche per ottenere intorno a questo (quando questo il comportamento non è quello che vuoi). Uno (se si dispone di una funzione semplice, come si fa qui) è quello di utilizzare il costruttore funzione invece di una funzione letterale:

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

Answer 6

Questo è un codice molto intelligente. Così intelligente è una domanda su SO. :) Allontanerei la domanda del tutto abbassando il codice, solo per avere la possibilità di capirlo (o di averlo capito da un collega) tra sei mesi. Le chiusure hanno il loro posto, ma in questo caso le eviterei a favore di un codice più comprensibile.

Probabilmente, collegherei la stessa funzione a tutti i pulsanti, che otterrebbero il pulsante dall'evento, rimuovere "some_button" dall'ID e avvisare il risultato. Non così grazioso, ma garantisco che tutti in ufficio possano seguirlo a colpo d'occhio.