자바스크립트 - for문 안에서 Ajax 사용 시 순서 안맞는 문제 해결

 

 

 

 

 

웹 개발을 하게 되면 자바스크립트 내에서 Ajax 구현하는 일이 매우 많습니다.

jsp단에서 데이터를 주고받는 방법이 Ajax가 유일한 것은 아니지만 효율을 높이는 측면에서 많이 사용되는 방법입니다.

 

웹 페이지에서 특정 부분만 갱신하고 싶을 때 html 페이지 전체를 다시 받아서 로드하는 것은 매우 비효율적인 방법일 것입니다.
Ajax를 사용하면 내가 원하는 부분만 갱신할 수 있습니다. JSON, xml 등의 형태로 필요한 데이터만 받아서 갱신하기 때문에 효율적으로 서비스를 구성할 수 있게 됩니다.

 

1. Ajax 사용법

일단 간단한 예제를 보여드리겠습니다.

$.ajax({
    type: type,                      // get, post ..
    url: url,                        // url
    dataType: dataType,              // text, html, script, json, xml
    async: async,                    // 동기(false), 비동기(true)    default - true
    contentType: contentType,        // 예) "application/json;charset=UTF-8"
    data: data,                      // 보낼 데이터
    success: function(resultData){ ... }    // 콜백
});

 

각 항목은 주석으로 설명드리고 전체적으로 간단하게 설명하면 

본인이 원하는 url로 데이터를 보내고 응답을 받으면 그 결과와 받을 데이터를 콜백 받아서 내가 원하는 부분을 갱신시키는 것입니다.

 

실무에서 Ajax를 활용하다 보면 Ajax를 반복문에서 사용해야 할 경우가 생기기 마련입니다. 가령 보내는 데이터를 반복문으로 활용한다던지 받은 데이터를 반복문으로 활용한다던지 이유는 다양할 것입니다.

그런데 이런 상황에서 주의해야 할 점이 있습니다.

 

2. Ajax를 반복문에서 사용 시 잘못된 사용법

먼저 예시를 보면

 

for(var i = 0; i < 10; i++)
{
    $.ajax({
        type: "POST",
        url: "/test/testUrl",
        dataType: "json",
        async: true,
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(paramMap),
        success: function(resultData){
            console.log(i);
        }
    });
}

 

눈으로 소스를 봤을 때는 문제 될 부분이 없어 보입니다. 하지만 이렇게 반복문 안에 Ajax를 그냥 사용해서 실행해보면 개발자가 생각하는 순서대로 진행되지 않을 것이다.

그 이유는 받을 데이터가 아직 콜백 되지 않았는데 반복문은 기다려주지 않고 계속 진행되기 때문에 생각했던 진행순서와 실제 소스 실행 시 진행순서가 다르게 되는 것입니다.

 

3. 해결 방법(1)

이 문제를 해결하는 방법은

 

for(var i = 0; i < 10; i++)
{
    (function(i) {
        $.ajax({
            type: "POST",
            url: "/test/testUrl",
            dataType: "json",
            async: true,
            contentType: "application/json;charset=UTF-8",
            data: JSON.stringify(paramMap),
            success: function(resultData){
                console.log(i);
            }
        });
    })(i);
}

 

위 예시와 같이 Ajax 호출 전체를 function으로 감싸서 사용하는 방법이 있습니다. 이렇게 작성하여 실행하게 되면 우리가 원하는 순서로 소스가 실행됩니다.

 

4. 해결 방법(2)

또 하나의 방법은 Ajax 호출 시 async를 false(동기)로 설정해주는 것입니다.

  ** async의 default값은 비동기이기 때문에 따로 false값을 주지 않는다면 비동기로 실행됩니다.

      그렇기 때문에 반복문은 Ajax의 호출 완료를 기다려주지 않고 먼저 실행하는 것이다.