jQuery.ajax() 사용시 중복호출 방지하는 방법

jQuery.ajax() 함수를 버튼 이벤트 같은 곳에 걸어두었을 경우 버튼을 여러번 클릭시 request 요청이 여러번 날아가서 오동작을 일으키는 경우가 있다.

이 때 아래와 같은 방법들로 해결할 수 있다.

1. jQuery.ajax() 세팅 옵션에 async: false 추가하는 방법

jQuery.ajax() 는 default 세팅 값이 true 로 되어 있어 요청을 비동기로 처리하게 되는데 async: false 옵션을 추가하면 동기로 처리하게 된다.

동기로 처리하게되면 아까 위와 같은 상황에서 버튼을 눌러 request 요청을 날렸을 때 response 요청이 올 때까지 다른 request 요청은 받지 않게 되어 중복호출을 방지한다.

2. 버튼에 클릭 이벤트를 jQuery.bind(), jQuery.unbind() 로 처리하는 방법

아래와 같이 jQuery.ready() 에 클릭 이벤트를 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();

                     });  
             });
}

플러그인을 사용하는 방법으로 위 플러그인을 사용하게 되면 요청이 들어왔을 때 Please wait… 와 같은 Progress 메세지를 띄우면서 페이지에서 다른 이벤트를 막아버린다.

띄울 메세지를 css를 사용하여 커스텀으로 작성할 수도 있다.