[javascript] jQuery.ajax() 사용시 중복호출 방지

jQuery.ajax() 중복 호출 방지

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

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

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

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

동기로 처리하게 되면 아까 위와 같은 상황에서 버튼을 눌러 request 요청을 날렸을 때 respons 요청이 올 때까지 다른 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();  
    });    
  });
}

3. jQuery Block UI Plugin을 사용하는 방법

플러그인 사용하는 방법으로 위 플러그인을 사용하게 되면 요청이 들어왔을 때 Please wait... 와 같은 Progress 메세지를 띄우면서 페이지에서 다른 이벤트를 막아버린다. 띄울 메세지를 css를 사용하여 커스텀으로 작성할 수 도 있다.

[참고]

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