JQuery로 버튼(div) 중복 클릭 막기

버튼을 클릭하면 api를 불러와 아이템을 수령할 수 있는 기능이 구현되어있다.

그런데 전혀 생각도 못했던 문제인 서버와 통신을하는 딜레이 동안 중복 클릭을 했을 시, 클릭한 수 만큼 아이템이 지급되었다..

버튼에 disabled 속성을 주어 비활성화를 하려고 했는데, 생각해보니까 div에 클릭이벤트를 주었어서 다른 방법으로 버튼을 비활성화 하였다.

우선 api통신이 시작되면 버튼을 비활성화하고, 통신이 끝나면 다시 활성화가 되게끔 만들고자 했다.

우선 opacity를 0.5주어 비활성화가 된 것 같이 보이도록 했고, css에 "pointer-events": "none"라는게 있는데, 이녀석이 바로 html에 적용된 이벤트들을 무시하게 해준다!!

따라서 아래의 코드와 같이 작성을 해줌으로서, 중복 클릭시 아이템이 여러개 수령되는 문제를 막았다.

// 버튼비활성화
$(document).ready(function () {
  $(".div의 클래스네임").css({ "pointer-events": "none", opacity: 0.5 });
});

$.ajax({
  // url 정보와 넘길 파라미터...
}).done(function (data) {
  // 서버와 통신...
  
  // 버튼활성화
  $(document).ready(function () {
    $(".div의 클래스네임").css({ "pointer-events": "auto", opacity: 1 });
  });
});