duplicateBtn.html

<button id="duplicateBtn">중복 로딩 테스트</button>
<script>
var button = document.querySelector("#duplicateBtn");
button.addEventListener("click", function(e) {
  //alert("버튼이 눌렸어요.");
  //console.log(e);

  // document level에 커스텀 이벤트 호출하기
  var ev = new CustomEvent("btnClick", {
    detail: {
      delegateElement: e.srcElement
    }
  });
  document.dispatchEvent(ev);
});

// 중복 상태를 막기 위해 document level에 커스텀 이벤트를 생성한다.
document.addEventListener("btnClick", function(e) {
  //console.log("커스텀 이벤트가 호출되었습니다.");
  //console.log(e.timeStamp);
  var delegateElement = e.detail.delegateElement;
  var dataset = delegateElement.dataset;

  window.ld = dataset;

  // 최초 버튼 누른 시점 기억
  if (!dataset.hasOwnProperty("firstClickTimestamp")) {
    dataset.firstClickTimestamp = e.timeStamp;

    // 여기에서 원래 버튼이 해야 할 일을 처리한다(예를 들면 통화 연결)
    // 동작이 끝나면 dataset의 firstClickTimestamp 값을 제거하고
    // 백그라운드 동작 이미지를 제거한다.
    console.log("통화 연결을 시도합니다");
    setTimeout(function() {
       console.log("통화연결이 성공적입니다");
       delete dataset["firstClickTimestamp"];
    }, 4000);
  } else {
    console.log("버튼이 여러번 클릭되고 있습니다. 암만 눌러봐라. 내가 동작하나");
  }
});
</script>

버튼이 여러번 클릭되고 있습니다. 암만 눌러봐라. 내가 동작하나 ㅎㅎ