ajax 중복요청, 중복클릭, 중복호출 막는 여러가지 방법들

중복요청 방지가 필요한 이유는 중복결제, 같은 내용 추가/등록 등을 막기 위함

 

 

jQuery.ajax() 중복요청 처리 방지하기

 

 

1

ajax 가 완료되기 전에 다시 클릭하였을 때 해당 요청 진행을 막는 코드
상태 변수를 만들어 전송 유무에 따라 Ajax 요청을 하거나 차단한다.

 

var isRun = false;

function abcde() {
    
    if(isRun == true) {
        return;
    }
    
    isRun = true;
    
    $.ajax({
 
        ...
 
    }, success : function(datas) {
        
        isRun  = false;
 
        ...
 
    });
}

 

 

2

또는 ajax 세팅 옵션에 async : false를 추가한다. (동기 처리)
동기로 처리하게되면 버튼을 눌러 request 요청을 날렸을 때 response 요청이 올 때까지
다른 request 요청은 받지 않게 되어 중복호출을 방지한다. 

 

async : false;

 

 

3

또는 버튼에 클릭 이벤트를 jQuery.bind(), jQuery.unbind() 로 처리해 클릭 이벤트를 bind 시켜놓는다. (클릭의 비활성화) 한 번 클릭시 클릭 이벤트를 unbind 시키고, ajax 요청이 끝나면 다시 bind 시킨다.

 

$(document).ready(function() {
	$('#foo').bind('click', function() {
		doSomething();  
	});
});
 
var doSomething = function(){
	$('#foo').unbind('click');
  
	$.ajax({
		type: "POST",
		url: "some.do"
	}).done(function() {
		$('#foo').bind('click', function() {
			doSomething();  
		});    
	});
}


// 출처: https://javafactory.tistory.com/146 [FreeLife의 저장소]

 

 

4

setTimeout() 메소드를 사용하여 중복을 막았다.  

 

// 클릭 후 읽을 부분
if(dontDouble) {
	return;
}
dontDouble = true; 

//아래는 ajax. success, error function 사이에 넣는다
setTimeout(function() { dontDouble = false; }, 10000);

 

 

5

중복처리를 해결할 수 없다면 마지막 success 값만 실행한다.

 

var ajax_last_num = 0; // 마지막 요청 카운트 저장. 전역변수 

// ajax 요청 시작 전 ajax 요청이 들어있는 함수의 지역변수 
var current_ajax_num = ajax_last_num;

// ajax 중복요청왔을때 계속 ajax success 코드실행을
// 방지하기 위해 지금 들어온 요청의 카운트 저장 

$.ajax({ 
	dataType: "html", 
	type:'get', 
	url: url, 
	beforeSend:function(request){ 
		ajax_last_num = ajax_last_num + 1; // 요청의 마지막 count 를 +1 
		//요청 전 실행되야할 코드 
	}, 
	success:function(request){ 
		if(current_ajax_num == ajax_last_num - 1){ // 현 요청이 마지막 요청인지 확인
		//성공했을때 동작해야될 코드
} 
});

// 출처: https://darammg.tistory.com/5 [다람쥐의 경험들]

 

 

 

6

기타 방법으로는 클릭할 버튼을 disable 시키거나 body 부분 위에 반투명 레이어와 로딩 이미지를 띄우는 jQuery BlockUI 플러그인을 사용하는 방법이 있다.

 

 

중복 방지를 위해서 프론트와 벡엔드에서 각각 해야할 것

프론트 JS에서는 preventDefault()나 attr('disabled', true) 등을 사용해서 "버튼 클릭" 직후의 중복 발송처리 방지,백엔드에서는 요청/응답에 타임스탬프를 넣거나 특정 토큰을 발급하거나 하는 방식으로 중복 요청처리 방지. 얼마나 완벽하게 더블서브밋을 방지해야 하느냐에 따라서 로직은 다양

 

참고하면 좋을 내용

ajax 호출 시 로딩이미지 출력하기