jQuery ajax 동기식으로 사용하기

ajax를 사람이 직관적으로 생각했을때 그대로 사용하면 아래와 같은 문제가 발생한다.

가령 아래와 같은 경우이다.

/**
 * 폼 전송
 */
function submitForm(formClass) {
    ..........

    // ajax 아이디 중복검사
    if (validationResult == true)
        /**
         * 비동기식 ajax 함수
         * async: true(defalut)
         */
        checkIdDupl();

    ..........

    // 최종 폼 전송
    if ((validationResult = setFinalValidationResult(formClass)) == true) {
        /**
         * checkIdDupl()가 끝나기 전에 먼저 실행되어버린다.
         * --> 코드가 복잡해지면 파악하기 힘듦
         */ 
        printFormDatas(formClass);
    }
}

--> 폼을 먼저 보내버린 후, 중복체크 함수 실행이 끝난다.

사람이 생각하는 것과 같게 하기 위해서는 ajax 파라미터 async를 false로 설정해준다. (default: true)

function checkIdDupl() {
    var id = $('#id2').val();

    $.ajax({
        type: 'post',
        url: '/member/checkIdDupl/' + id,
        data: JSON.stringify({}),
        dataType: 'json',
        
        /**
         * 비동기식 -> 동기식으로 바꿔준다.
         */
        async: false,
        
        ......

--> 원하는 결과가 나온다.