[javascript] for 안에 ajax 호출 시, 순차 진행 방법

for 안에 ajax 호출 시, 비동기적으로 실행하는 $.ajax() 함수로 인해 데이터가 유실 된다.
문제) for 안에 여러개 호출 시, 마지막 값만 데이터가 처리됨.

for(var i=0;i<ApiArr.length;i++) {
    $.ajax({
            url: "/api/"+ApiArr[i],
            type: "get"
        }).done(function(data) {
        ...
        }
    }); // end of ajax
} // end of for

해결) 반복문 내의 클로저를 사용하여 각 호출의 고유한 범위를 갖도록 설정
클로저를 사용 하여 (function(index) { ... $.ajax{( .... }); })(i); 고유한 인덱스 값을 갖도록 하여 내부의 $.ajax 호출이 독립적으로 실행 됨.

for(var i=0;i<ApiArr.length;i++) {
    (function(index) { // 클로저 사용 : 고유한 인덱스 값을 설정하여 ajax 독립적 실행
        $.ajax({
                url: "/api/"+ApiArr[i],
                type: "get"
            }).done(function(data) {
            ...
            }
		}); // end of ajax
    })(i); // i 값 전달
} // end of for