Question

标题中的行有什么问题？

以下示例应该创建一个按钮，每次单击它时都会递增计数器。但是，我在按钮点击之间强制延迟2000毫秒。但是，如果我使用注释掉的行代替

，则下面的版本有效

document.getElementById("rollButton").onclick=function(){calculation()};

（在函数afterWaiting（））

之后

我得到了各种奇怪的结果，例如计数器开始递增超过1，等待时间消失了？

<!DOCTYPE html>
<html>
    <head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>

        function afterWaiting()
        {
            $("#rollButton").css("color","black");
            //$("#rollButton").click(function(){calculation()});
            document.getElementById("rollButton").onclick=function(){calculation()};

        }

        var counter=0;
        function calculation()
        {

            ////Enforcing wait:
            document.getElementById("rollButton").style.color="red";
            document.getElementById("rollButton").onclick="";
            window.setTimeout("afterWaiting()",2000);


            counter=counter+1;
            document.getElementById("test").innerHTML=counter;

            }



    </script>

    </head>
<body>

  <button type="button" onclick="calculation()" id="rollButton"> Roll! </button>

<p id="test"> </p>


</body>
</html>

我误解了什么？

提前感谢：）

的jsfiddle： http://jsfiddle.net/Bwxb9/

Answer 1

不同之处在于，当您在原始版本中通过onclick应用事件处理程序时，您只能将一个处理程序绑定到该元素。并使用onclick=""类清除它。

使用jQuery .click(handler)时，每次调用它时都会绑定一个新的处理程序（并且可以使用unbind('click')（而不是onclick="" 取消绑定它因此，在对afterWaiting进行几次调用后，您已在元素上应用了多个点击处理程序，并且每次点击calculation函数都会多次运行..

因此，纠正它的一种方法是替换

document.getElementById("rollButton").onclick="";

与

$('#rollButton').unbind('click');

Answer 2

这通常是一种奇怪而混乱的方法。这里是我如何做到这一点，没有混合jquery和纯js（onclick）太多：

http://jsfiddle.net/LGvKS/

var wait = false;
counter = 0;
$('button').click(function(){
    if(!wait){
        $('span').text(++counter);
        wait=true;
        setTimeout(function(){
            wait=false;
        },2000);
    }
});

Answer 3

唯一需要的代码是

<button type="button" id="rollButton"> Roll! </button>
<p id="test"> </p>


var counter = 0;
var $test = $('#test');
var $rollButton = $('#rollButton');
function increment(){
    $test.html(counter++);
    $rollButton.off('click', increment);
    setTimeout(function(){
        $rollButton.on('click', increment);
    }, 2000);
}
$rollButton.on('click', increment);

演示：Fiddle

更新：正如Andy所建议的那样，但我会推荐Andy的回答，因为它不涉及额外的事件处理

var counter = 0;
var $test = $('#test');
var $rollButton = $('#rollButton');
function increment(){
    $test.html(counter++);
    setTimeout(function(){
        $rollButton.one('click', increment);
    }, 2000);
}
$rollButton.one('click', increment);

演示：Fiddle

$（ “＃ID”）点击（函数（）{计算（）}）。

3 个答案: