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、元のバージョンと同じようにイベント ハンドラーを適用する場合、1 つのハンドラーしか要素にバインドできないことです。そして、onclick=""一種の使用はそれをクリアします。

jQuery.click(handler)を使用する場合、呼び出すたびに新しいハンドラーをバインドします (およびunbind('click')(ではなく (ではなくonclick="") でアンバインドできます)。そのため、 を 2 回呼び出した後、afterWaiting要素に複数のクリック ハンドラーを適用し、クリックするたびにcalculation関数が実行されます。複数回..

したがって、それを修正する1つの方法は、交換することです

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

デモ:フィドル

更新: 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);

デモ:フィドル

于 2013-02-23T13:42:03.050 に答える