ajax를 동기식처리 하는 방법(코드의 순서 또는 절차적으로 동작하게 만들기)

데이터를 받아올 때 이 값이 있는지 없는지만 체크하면 되어서 

ajax 결과가 데이터가 null인지 아닌지만 체크해주면 되었다. 

function checkHoliday(data){
 
var checkFlag = true; //체크항목 플래그
 
var params = {};
params.empName = $('#empName').val();
params.compName = $('#compName').val();
 
$.ajax({
        type: "POST",
        url: "<c:url value='/practice/getHolidayFlag.do'/>",
        dataType: 'json',
        data: params,
        success: function(result){
            if(result != null){
            // do something
            
            }else{
                checkFlag = false;
            }
        }
 
// true일 때만 데이터 테이블이 그려짐.
if(checkFlag == true){
    $('#grid').DataTable().row.add(data).draw();
}
}

ajax 결과가 null 값으로 넘어오면 checkFlag가 false로 변하면서 데이터테이블 row를 그리지 않을 줄 알았다.

근데 이게 왠일?? 잘 그려지는게 아닌가.

개발자 모드로 체크해봤더니 함수를 한바퀴 다 돌고 난 다음에 ajax 결과가 조회되는 거 같았다.

그래서 검색을 해봤더니 ajax가 데이터 조회를 할 때 ajax가 데이터 조회를 하든 말든 함수는 계속 진행된다는 것이다.

ajax가 서버에 파라미터를 던지고 db를 조회하고 데이터를 불러오는게 아무리 빨라도 계속 진행되고 있는 자바스크립트의

처리속도보단 빠를 수 없단 것이다. 

$.ajax({
        type: "POST",
        url: "<c:url value='/practice/getHolidayFlag.do'/>",
        dataType: 'json',
        data: params,
        async:false,
        success: function(result){
            if(result != null){
            // do something
            }
        }

그래서 위의 코드처럼 result 값을 받아보고 null인지 아닌지 결과값을 판단하기 전에 이미 함수는 끝나버린다.

내가 원하는 것은 코드가 위에서부터 차례대로 순서대로 읽고 진행되는 것이다.

해결방법은 ajax의 옵션인 async를 이용하면 된다.

synchronize의 준말 같은데 동기화를 false시킨다는 뜻이겠지?

async: false로 선언해주면 ajax결과값이 끝난 다음에 함수가 진행된다. 

function checkHoliday(data){
 
var checkFlag = true; //체크항목 플래그
 
var params = {};
params.empName = $('#empName').val();
params.compName = $('#compName').val();
 
$.ajax({
        type: "POST",
        url: "<c:url value='/practice/getHolidayFlag.do'/>",
        dataType: 'json',
        async: false,
        data: params,
        success: function(result){
            if(result != null){
            // do something
            
            }else{
                checkFlag = false;
            }
        }
 
// true일 때만 데이터 테이블이 그려짐.
if(checkFlag == true){
    $('#grid').DataTable().row.add(data).draw();
}
}

async: false가 되면 ajax결과 값을 판단한 뒤에 함수가 진행되기 때문에 

ajax결과가 null이라면 checkFlag가 false로 변하면서 데이터테이블 row를 그리지 않는다.

ajax가 비동기식 방식이지만, 동기식처럼 코드 순서대로 로직을 처리하기 원할 때 위와 같이 사용하면 된다.