ajax 여러개 사용할 경우 꼬이는 문제 해결법

ajax 여러개 사용할 경우 꼬이는 문제 해결법

 

여러가지 조건에 따라 ajax를 사용해 비동기 통신을 할때

가끔 꼬이는 경우가 있다.

 

예를 들면 1번 ajax를 탔는데 2번 ajax 의 success function이 실행 된 후 1번의 success function 이 실행된다 든가 하는..

 

정확한 원인이 뭔지는 모르겠지만

javascript에서 비동기로 서버에 호출하는동안 조건문은 계속 실행 되는거 같다.

 

예를 들어  간단히 아래와 같이 코딩할 때

 

if (tCombination==true){       
 
setBtt(date);   
 
}else{
}
if (date != ""){
    updateData(date, data[i][1], data[i][5], data[i][7],  data[i][3]);
}

 

setBtt와 updateData function은 모두 ajax를 포함 하고 있다.

본인의 문제는 setBtt가 실행되고 결과값을 가져오기 전 updateData 의 ajax를 실행시키는 것이였다.

 

이 문제의 해결방법은 간단하다.

ajax를 탈때 서버로 부터 결과를 받지 않으면 다음으로 넘어가지 않게 하면 되는것이다.

ajax 옵션에 async 옵션이 있다. 서버로부터 값이 오지 않으면 잠시 다음으로 넘어가지 않는것이다.

 

그래서 async : false 옵션을 주니 ajax가 꼬이는 문제가 해결되었다.

 

예)

- 기존 ajax

$.ajax({
  type : 'POST',
  dataType : 'json',
  url : "${ctx }/ajaxTest,
  success : function(returnDataRecover) {
   if(returnDataRecover.resultCode==200){
        alert("데이터를 덮어씌우는데 성공하였습니다.");
   }else if(returnDataRecover.resultCode==300){
        alert("데이터를 가져오는데 실패하였습니다.");
   }
  },
  error:function(e){
   if(e.status==300){
    alert("데이터를 가져오는데 실패하였습니다.");
   }
  }
 }); 

 

- 수정 후 ajax

$.ajax({
  type : 'POST',
  dataType : 'json',
 
  async: false,
  url : "${ctx }/ajaxTest,
  success : function(returnDataRecover) {
   if(returnDataRecover.resultCode==200){
        alert("데이터를 덮어씌우는데 성공하였습니다.");
   }else if(returnDataRecover.resultCode==300){
        alert("데이터를 가져오는데 실패하였습니다.");
   }
  },
  error:function(e){
   if(e.status==300){
    alert("데이터를 가져오는데 실패하였습니다.");
   }
  }
 });