passando o índice de loop para a function de retorno de chamada ajax (JavaScript)

Eu tenho um loop para encerrar uma chamada de ajax e estou tentando determinar o melhor método para passar o índice do loop for para a function de retorno de chamada. Aqui está o meu código:

var arr = [2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010]; for (var i = 0; i < arr.length; i++) { $.ajaxSetup({ cache:false }) $.getJSON("NatGeo.jsp", { ZipCode: arr[i], Radius: document.getElementById("radius").value, sensor: false }, function(data) { DrawZip(data, arr[i]); } ); } 

Atualmente, somente o último valor da matriz arr é passado devido à chamada ajax assíncrona. Como posso passar cada iteração da matriz arr para a function de retorno de chamada, além de executar a chamada ajax de forma síncrona?

Você poderia usar um fechamento de javascript:

 for (var i = 0; i < arr.length; i++) { (function(i) { // do your stuff here })(i); } 

Ou você poderia apenas usar $.each :

 var arr = [2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010]; $.each(arr, function(index, value) { $.ajaxSetup({ cache:false }); $.getJSON("NatGeo.jsp", { ZipCode: value, Radius: document.getElementById("radius").value, sensor: false }, function(data) { DrawZip(data, value); } ); }); 

Eu não li todas as 30 perguntas @Anurag listadas, mas achei a seguinte syntax de callback que parece funcionar:

 (function(year) { return (function(data) {DrawZip(data, year);}); })(arr[i]) 

Isso substitui a function(data) original function(data) . Aliás, os resultados estão em ordem aleatória, devido à resposta assíncrona

Você pode até mesmo omitir os colchetes for loop como mencionado por John Resig aqui eu acho que este caminho é mais legível

 for (var i = 0; i < arr.length; i++) (function(i) { // async processing setTimeout(function(){ console.log(i); }, i * 200); })(i);