script&css&html&ajax

ajax 요청시 이전 요청이 종료전 다시 요청이 오면 이전 요청 종료

subinpapa 2023. 9. 15. 14:26

이전 AJAX 요청이 아직 완료되지 않은 경우에만, 현재 요청을 취소하고 새로운 요청을 시작합니다.

이렇게 하면 여러번 클릭하더라도 마지막 요청만 실행되며 이전 요청은 취소됩니다.

var ajaxRequest = null;

// 체크박스 클릭 이벤트 리스너
$('input[type="checkbox"]').on('click', function() {
    if (ajaxRequest !== null) {
        // 이전 요청이 아직 완료되지 않았으면 취소
        ajaxRequest.abort();
    }

    // AJAX 요청 시작
    ajaxRequest = $.ajax({
        url: 'your_action_result_url_here',
        method: 'POST', // 또는 'GET' 또는 다른 HTTP 메서드
        data: {
            // 요청 데이터 설정
        },
        success: function(response) {
            // AJAX 요청 성공 시 실행되는 코드
            console.log('성공:', response);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            // AJAX 요청 오류 시 실행되는 코드
            console.error('오류:', textStatus, errorThrown);
        },
        complete: function() {
            // AJAX 요청 완료 후 실행되는 코드
            ajaxRequest = null; // 요청이 완료되었으므로 null로 재설정
        }
    });
});