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

将标志变量isClicked默认设置为false。点击按钮后，将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 2

删除点击处理程序：

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 3

这有两个解决方案，一个是定义和设置一个标志来跟踪定时器在onclick之外运行，另一个是在倒计时之前调用clearInterval来停止任何已经运行的倒计时。

解决方案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基本相同，只是删除了一个var。

修改：如果您未在onclick上方的vars列表中定义countdown，那么这可能无法正常工作，因为倒计时-DIV将填充倒计时全局。

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。您是否忘记在代码顶部的变量中定义倒计时或在其他地方定义倒计时？现在它将是一个全局的，任何其他代码（例如库）都可以覆盖它。

Answer 4

我的解决方案很容易使用.ONE，超时后（2秒）将.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>

防止按下多个按钮

4 个答案: