pasando el índice de forzado a la función de devolución de llamada ajax (JavaScript)

Question

Tengo un bucle for que encierra una llamada ajax y estoy tratando de determinar el mejor método para pasar el índice del bucle for a la función de devolución de llamada. Aquí está mi 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]); 
     } 
); 
} 

En la actualidad, sólo el último valor de la matriz arr se pasa debido a la llamada AJAX asíncrona. ¿Cómo puedo pasar cada iteración de la matriz de arr a la función de devolución de llamada, además de ejecutar la llamada ajax sincrónicamente?

Answer 1

Se puede usar un Javascript cierre:

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

O usted podría utilizar $.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); 
    } 
); 
}); 

Answer 2

no he leído todas las 30 preguntas @Anurag la lista, pero me encontré con la siguiente devolución de llamada sintaxis que parece funcionar:

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

Esto reemplaza al original function(data). Por cierto, los resultados están en orden aleatorio, debido a la respuesta asíncrona

Answer 3

Usted puede incluso omitir los paréntesis, para bucle como se ha mencionado por John Resig here creo que de esta manera es más fácil de leer

for (var i = 0; i < arr.length; i++) (function(i) { 

    // async processing 
    setTimeout(function(){ 
     console.log(i); 
    }, i * 200); 

})(i);