[$.ajax]_ajax 통신 중단, + 마지막 요청만 받아서 수행하기

목적 

ajax와 같은 비동기 통신시 여러개의 동일 요청이 들어오면 가장 마지막 요청만 받아서 수행하도록 구성

---

비동기 통신을 구현하면서 다음과 같은 현상이 발생합니다.

 

게시판 페이징 처리를 했다고 가정합니다.

네트워크가 느리거나, 데이터가 많아서 로딩이 오래걸리는 경우

페이징을 1~5까지 빠르게 넘길 때 데이터가 이 속도를 따라오지 못해서 느리게 쫒아오는 경우가 있습니다.

 

이럴경우 로딩이 안되고 다른페이지 로드시 오류가 발생할 수도 있고, 시각적으로도 올바르지 못합니다.

 

이럴때 사용하는 메소드는 abort() 메소드 입니다.

 

abort() 를 사용해서 동일한 ajax 호출시. 이전 요청을 삭제하고 지금 받은 요청을 처리하는 식으로 코드를 짜면됩니다.

 

---

<script>

let ajax = null;
//
function noticeClick(element) {
    

    if(ajax != null) {
        ajax.abort();
        ajax = null;
    }
    
    ajax = $.ajax({
    
    ///코드 생략

• 우선 ajax가 있는 함수, 혹은 service 단 밖에 변수를 null값으로 선언합니다.

 

• 그리고 함수 내부에는 해당 변수가 null이 아닌 값이 들어 있을 경우 if문 내부를 돌게 합니다.if 문 안에는 실행되는 ajax를 abort() 를 사용하여 호출을 삭제하고, ajax 변수를 다시 null로 초기화 합니다.

 

• 그리고 해당 변수 = 비동기 통신 으로 선언하게 해줍니다.

즉 해당 함수가 실행될때 이미 요청을 하고 있었다면, 해당 요청을 삭제하게 되는 것이고, 만약 최신(가장 마지막 요청)이 된다면 그 뒤 어떠한 요청이 없기 때문에 ajax통신이 이루어 집니다.

 

이렇게 abort() 를 활용하는 예시를 알아보았습니다.

 

감사합니다.