여러 단추 누르기 방지

Question

단추로 활성화되는 간단한 카운트 다운이 있습니다. onclick을 사용하면 동작을 시작하지만 버튼을 계속 누르고 있으면 시간이 늘어나고 카운트 다운이 동기화되지 않은 것으로 나타났습니다. 어떻게 이런 일이 일어나지 않도록 방지하고 한 번에 한 번의 클릭 만 허용합니까?

var count = 10, 
     startcounter = document.getElementById("stercount"); 

startcounter.onclick = function() { 
    countdown = setInterval(function(){ 
    document.getElementById("countdown").innerHTML = count + " seconds remaining!"; 
    if (count <= 0) { 
     clearInterval(countdown); 
     document.getElementById("countdown").innerHTML = "Done!"; 
    } 
    count--; 
    }, 1000); 
}; 

DEMO : http://jsfiddle.net/StWXk/1/

Answer 1

하면 클릭 핸들러를 제거

startcounter.onclick = function() { 
    this.onclick = null; 
    ... 
}; 

http://jsfiddle.net/StWXk/3/

편집 :

function startTimer() { 
    this.onclick = null; 
    ... 
} 

startcounter.onclick = startTimer; 

pausecounter.onclick = function() { 
    startcounter.onclick = startTimer; 
    clearTimeout(countdown); 
}; 

:은 일시 정지 버튼 요구 사항을 바탕으로, 당신은 타이머가 일시 정지 클릭 처리기를 다시 바인딩 할 수 있습니다

http://jsfiddle.net/StWXk/8/

Answer 2

는 false로 플래그 변수 isClicked 기본을 설정합니다. 단추를 클릭하면 isClicked을 true으로 설정하십시오. click 이벤트 중에 isClicked이 true 인 경우 return false으로 지정하십시오.

var isClicked = false; 
var count = 10, 
     startcounter = document.getElementById("stercount"); 

startcounter.onclick = function() { 
    if(isClicked) return false; 

    isClicked = true; 
    countdown = setInterval(function(){ 
    document.getElementById("countdown").innerHTML = count + " seconds remaining!"; 
    if (count <= 0) { 
     clearInterval(countdown); 
     document.getElementById("countdown").innerHTML = "Done!"; 
    } 
    count--; 
    }, 1000); 
};​ 

데모 : http://jsfiddle.net/StWXk/2/

Answer 3

이 다른 카운트 다운 전에 사항 clearInterval을 호출되면, onclick을 외부에서 실행되는 하나의 정의 및 타이머의 추적 할 수있는 플래그를 설정하고,이 두 가지 솔루션이 있습니다 이미 실행중인 카운트 다운을 중지하십시오.

해결책 1 : 타이머가 실행 중인지 여부를 나타내는 플래그.

var count = 10, 
    startcounter = document.getElementById("stercount"), 
    running; 

startcounter.onclick = function() { 
    if (running) 
     return; 

    running = true; 
    countdown = setInterval(function(){ 
     document.getElementById("countdown").innerHTML = count + " seconds remaining!"; 
     if (count <= 0) { 
      clearInterval(countdown); 
      document.getElementById("countdown").innerHTML = "Done!"; 
     } 
     count--; 
    }, 1000); 
}; 

해결 방법 2 : 을 시작하기 전에 clearInterval와 타이머를 중지.

var count = 10, 
    startcounter = document.getElementById("stercount"); 

startcounter.onclick = function() { 
    clearInterval(countdown); 
    countdown = setInterval(function(){ 
     document.getElementById("countdown").innerHTML = count + " seconds remaining!"; 
     if (count <= 0) { 
      clearInterval(countdown); 
      document.getElementById("countdown").innerHTML = "Done!"; 
     } 
     count--; 
    }, 1000); 
}; 

3 해결 방법 : 당신은 당신의 깃발로 countdown을 사용할 수 있습니다 ,하지만 그래서 당신이 당신이 명확마다 null로 설정되어 있는지 확인해야 할 때. 이것은 기본적으로 솔루션 1과 동일합니다.

편집 : 당신의 카운트 다운-DIV 카운트 다운 - 세계를 채울 것이기 때문에 당신이 온 클릭 위의 바르 목록에 countdown를 정의하지 않는 경우이 실제로 작동하지 않을 수 있습니다.

var count = 10, 
    startcounter = document.getElementById("stercount"); 

startcounter.onclick = function() { 
    if (countdown) 
     return; 

    countdown = setInterval(function(){ 
     document.getElementById("countdown").innerHTML = count + " seconds remaining!"; 
     if (count <= 0) { 
      clearInterval(countdown); 
      countdown = null; 
      document.getElementById("countdown").innerHTML = "Done!"; 
     } 
     count--; 
    }, 1000); 
}; 

ps. 코드 상단에있는 vars에 카운트 다운을 정의하는 것을 잊었습니까? 아니면 카운트 다운이 다른 곳에서 정의 되었습니까? 현재는 전역 코드이며 다른 모든 코드 (예 : 라이브러리)가이를 덮어 쓸 수 있습니다.

Answer 4

내 솔루션은 timeout (2seconds) 바인드 후 .ONE을 사용하는 것이 매우 쉽습니다.버튼을 다시 한 번 누르십시오.

<script> 
      var execute_form_func = function(){ 
       console.log("Click on button"); 
       //some code or other stuff 
       .... 
       // bind same function to button 
       setTimeout(function(){ 
        console.log("Enabling"); 
        $("#update_submit").one("click",execute_form_func); 
       }, 2000); 

      }; 
      $(document).ready(function(){ 
       $("#update_submit").one("click",execute_form_func); 
      }); 
</script>