for loop에서 ajax 콜백 함수로 인덱스 전달(JavaScript)

for loop에서 ajax 콜백 함수로 인덱스 전달(JavaScript)

ajax 콜을 둘러싼 for 루프가 있어 for 루프에서 callback 함수로 인덱스를 전달하기 위한 최적의 방법을 결정하려고 합니다.코드는 다음과 같습니다.

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]);
        }
  );
}

현재 arr 배열의 마지막 값만 비동기 Ajax 호출로 전달됩니다.arr 배열의 각 반복을 콜백 함수에 전달하려면 ajax 콜을 동기화하는 것 외에 어떻게 해야 합니까?

Javascript closure를 사용할 수 있습니다.

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

아니면 그냥 사용하셔도 됩니다.$.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);
    }
  );
});

@Anurag 목록에 있는 30개의 질문을 모두 읽은 것은 아니지만, 다음과 같은 콜백 구문이 효과가 있는 것 같습니다.

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

이것이 원본을 대체한다.function(data)덧붙여서, 결과는 비동기 응답에 의해 랜덤 순서로 되어 있습니다.

여기에서 John Resig가 언급한 for-loop 대괄호도 생략할 수 있습니다. 이 방법이 더 읽기 쉽다고 생각합니다.

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

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

})(i);

언급URL : https://stackoverflow.com/questions/6077357/passing-index-from-for-loop-to-ajax-callback-function-javascript