0

标题中的行有什么问题？

下面的示例应该创建一个按钮，每次单击该按钮时都会增加一个计数器。但是，我强制在按钮单击之间延迟 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/

4

3 回答 3

3

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

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

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

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

和

$('#rollButton').unbind('click');
于 2013-02-23T13:41:19.503 回答
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);
    }
});
于 2013-02-23T13:40:38.447 回答
2

唯一需要的代码是

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

演示：小提琴

更新：按照安迪的建议，但我会推荐安迪的答案，因为它不涉及额外的事件操作

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

演示：小提琴

于 2013-02-23T13:42:03.050 回答