[JS] Ajax 중복호출 방지 (코드 포함)

사용자 및 네트워크 통신이 잠시 원할하지 않을 때, '버튼' 기능이 submit이 되어서 DB에 저장 되면서 데이터들이 중복으로 쌓이는 경우 이를 해결해 주는 방법.

 

 

 1. '버튼' Hide 처리

• submit 될 때, JS 함수에서 필수값 통과가 완료되면 Ajax 통신 전 해당 버튼을 hide() 기능으로 인해 숨김 처리, Ajax 통신 Success후에 페이지를 reload 하거나, 다시 submit 버튼을 show() 해주는 것.

2. Ajax 세팅 옵션에 async : false를 추가

• 동기로 처리하게 되면 request 요청을 날렸을 때, response 응답이 오기 전까지 다른 request 요청을 받지 않게 되어 중복 호출을 방지한다.

3. 버튼 클릭 이벤트 bind(), unbind() 처리

• 클릭을 비활성화 시키는 방법으로, 한번 클릭시 이벤트를 unbind()시키고, Ajax success 후에 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();  
		});    
	});
}

4. settimeout()  메소드 사용

var isAjaxing = false;
 
$("#button").click(function() {
 
        if( isAjaxing ){
            alert("처리중입니다. 잠시만 기다려주세요.");
            return;
        }
        isAjaxing = true;
 
        $.ajax({
            type:"POST"
            , url:"/test/insert"
            , dataType:"html"
            , data:$("#default").serialize()
            , success: function(data){
                alert("송신성공")
                setTimeout(function(){ isAjaxing = false; }, 10000); //중복 방지를 위해 타임아웃 설정
    
            }
            , error: function(request,status,error) {
                alert(error);
                
                setTimeout(function(){ isAjaxing = false; }, 10000); //중복 방지를 위해 타임아웃 설정
            }
        });
    });