[Jquery] for문안에서 ajax 돌리는 방법(feat : 즉시실행함수)

오늘은 얼마전 회사에서 업무하다가 있었던 오류상황에 대해 말씀드려보려고 합니다.

업무 당시 ajax를 for문으로 돌려야하는 상황이 있었습니다.
전 그냥 평소 일반적인 for문에다가 ajax를 선언해서 필요한 데이터 리스트를 뽑으려고 하는데 자꾸 이상하게 뽑히는 것이었습니다

근데 리서치를 for문안에 ajax를 돌리면 ajax에서 데이터가 콜백이 되기전에 이미 for문이 다 끝나버려서 그런것이었던겁니다.

잘못된 ajax 호출 방법

for(var i = 0; i < data.length; i++){
        $.ajax({
            url: "API url",
            data:ajaxData,
            success:function(result){
                 console.log(i);
             }
        });
}
 

이렇게 돌리던걸

올바른 방법

for(var i = 0; i < data.length; i++){
  (function(i) {
            $.ajax({
            url: "API url",
            data:ajaxData,
            success:function(result){
                 console.log(i);
             }
        });
    })(i);
}

이렇게 즉시실행함수를 이용해서 바꿔주면 됩니다.

즉시실행함수란?

일반 함수는 안에 지정한 변수를 실행하고 여러가지의 과정들을 다 겪고 실행이 되는데, 즉시실행함수는 일련의 과정을 거치지 않고 곧바로 실행되는 것입니다. 사용방법은 ()안에 function 함수를 감싸고 마지막에 ()을 한번더 넣어주면 됩니다.

참고자료
https://mygameprogamming.tistory.com/72