Javascript $（“id”）。单击（函数（）{calculation（）}）；_Javascript_Jquery_Onclick

Javascript $（“id”）。单击（函数（）{calculation（）}）；

javascript jquery

Javascript $（“id”）。单击（函数（）{calculation（）}）；,javascript,jquery,onclick,Javascript,Jquery,Onclick,标题中的行有什么问题下面的示例应该是制作一个按钮，每次单击该按钮时都会增加一个计数器。但是，我强制在按钮点击之间延迟2000毫秒。但是，如果我使用注释掉的行而不是 document.getElementById("rollButton").onclick=function(){calculation()}; （两者都在函数afterWaiting（）中）我得到了各种奇怪的结果，例如计数器开始增加远远超过1，等待时间消失了 <!DOCTYPE html> <html>

标题中的行有什么问题

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


函数afterWaiting（）
{
$（“#滚动按钮”）.css（“颜色”、“黑色”）；
//$（“#滚动按钮”）。单击（函数（）{calculation（）}）；
document.getElementById（“rollButton”）.onclick=function（）{calculation（）}；
}
var计数器=0；
函数计算（）
{
////强制执行等待：
document.getElementById（“rollButton”）.style.color=“红色”；
document.getElementById（“rollButton”）.onclick=“”；
setTimeout（“afterWaiting（）”，2000）；
计数器=计数器+1；
document.getElementById（“test”）.innerHTML=计数器；
}
卷

我误解了什么

提前感谢：）

JSFiddle：

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

不同之处在于，当您像在原始版本中一样通过

onclick

应用事件处理程序时，您只能将一个处理程序绑定到元素。并使用

onclick=“

某种程度上清除它

使用jQuery

时，单击（handler）

可以在每次调用时绑定一个新的处理程序（并且可以使用

unbind（'click'）

（而不是使用

onclick=”“

）。因此，在对

afterWaiting

进行了几次调用之后，您已经在元素上应用了多个单击处理程序，并且在每次单击时，

计算

函数都会运行多次

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

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

与

唯一需要的代码是

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

演示：

你能请一个JS提琴吗？控制台说什么？我正在通过浏览器运行它，这不会引起任何抱怨？好吧，我这样做是因为我在学习jQuery，所以试图在不破坏东西的情况下从JS版本过渡到jQuery。@Kaare，这没什么错。听起来比我更刺耳我想@Andy在这里指出的（在他的代码中）是，你不需要每次都删除事件处理程序。只需设置一个标志（或者你可以禁用按钮）2秒钟。这也是我要做的。

而不是onclick=“”

--你确定吗？jQuery是如何绑定到该元素的？@JanDvorak它是使用

addEventListener

（或旧IE的

addEvent

）绑定的，它以不同的方式工作（读）在这种情况下，你也可以使用.one（）而不是.on（）。这样你就不必取消（）。

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

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