jquery ajax 중복호출 벗어나자, 진짜 이것때문에 개고생함

처음에 이런 생각을 했다.

왜 ajax로 호출하면... 당연히 한번만 하는 건데, 중복호출??

이게 말이되나?

단순하게 처음 생각이 들었던 것이.. 당연히 a= a+1 이러면 한번만 실행되지.. 저것이 두번실행되고 세번??

이건 말이 안되는 것 같아서 감이 더 안왔다.

$.ajax({
            enctype: 'multipart/form-data',    // file을 서버에 전송하려면 이렇게 해야 함 주의
            processData: false,    
            contentType: false,      
            cache: false,           
            timeout: 600000, 			
            url: "process.php",
            type: "post",		
            data: data,			
            // dataType:"text",  // text형태로 보냄
            success : function(data){

            // 주문서를 클릭하면 주문서 Ecount 넣어주는 것			

             switch(orderTmp) { 
              case 'estimate' :  
                   $("#reservedWord").val('');  
                   Ecount_login_click('estimate'); 
                   break;
              case 'order' :  
                   $("#reservedWord").val('');  
                   Ecount_login_click('order'); 
                   break;
              case 'saleinput' :  
                   $("#reservedWord").val('');  
                   Ecount_login_click('saleinput'); 
                   break;
              case 'regist_item' :  
                   $("#reservedWord").val('');  
                   Ecount_login_click('regist_item'); 
                   break;
              case 'workorder' :  
                   $("#reservedWord").val('');  
                   Ecount_login_click('workorder'); 
                   break;

              case 'groupexe' :  
                   $("#reservedWord").val('');  
                   Ecount_login_click('groupexe'); 
                   break;

             }


            },
            error : function( jqxhr , status , error ){
                console.log( jqxhr , status , error );
                        } 			      		
           });					

        }

 

실제 사용해 보니 ajax라는 것은 계속 호출하나 보다.

success: 성공하면 실행되는 것은 딱 한번일거란 나의 생각을 처참히 무너지고...

그동안 짜놓은 코드를 전부 수정해야 하는 대참사를 겪게 되는 느낌이..... 등골이 오싹하다.

그 수많은 시간 씨름했던 기억들이 주마등처럼 흘러내린다.....

싸늘하다~ 뭔지 모를 비수가 내 등에 그대로 정통으로 파고드는 것을 느낀다.

 

그래서 여러 방법들을 찾아서 해봤지만, 잘 안되었다.

settimeout을 이용하고 beforehand 기법도 이상하게 통하지 않다가 찾은 방법....

var ajaxRequest = null;

function sendAjaxRequest() {
  // 중복 실행 방지
  if (ajaxRequest !== null) {
    ajaxRequest.abort();
  }

  // ajax 요청 생성
  ajaxRequest = $.ajax({
    url: "example.com/ajax",
    type: "GET",
    success: function(data) {
      // ajax 요청 완료 후 처리할 작업
    }
  });
}

 

abort()를 이용해서 하니....

해결이 되었다...

	
	  if (ajaxRequest !== null) {
			ajaxRequest.abort();
		}

	 // ajax 요청 생성
	 ajaxRequest = $.ajax({

프로그램중인 주문서 화면...

 

 

abort로 해결된 하면인데,

호출이 얼마나 자주 일어나는지 눈이 돌아간다.

 

하지만, 해결해서 원하는 화면이 나옴을 감사하게 생각해야 겠다.

앞으로도 ajax를 통한 비동기 방식을 할때마다 이제는 좀 편하게 할 수 있지 않을까 생각한다.

이제 시작이다~