0

我有一个简单的倒计时，由按钮激活。使用onclicki 开始操作，但我注意到如果您继续按下按钮，它会增加时间并且倒计时不同步。我将如何防止这种情况发生，并且一次只允许单击一次？

  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);
};

演示： http: //jsfiddle.net/StWXk/1/ ​</p>

4

4 回答 4

4

将标志变量isClicked默认设置为false. 当您单击按钮时，设置isClicked为true。在click事件期间，如果isClicked是true则 make it 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/

于 2012-12-16T02:42:06.547 回答
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/

于 2012-12-16T02:57:57.967 回答
1

有两种解决方案，一种是定义和设置一个标志来跟踪计时器在 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。

编辑：如果您没有countdown在 onclick 上方的 vars 列表中定义，这可能实际上不起作用，因为您的 countdown-DIV 将填充 countdown-global。

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);
};

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

于 2012-12-16T02:45:30.833 回答
0

我的解决方案使用 .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>
于 2016-02-23T10:35:10.547 回答