javascript - JQuery - カウントがリセットされたときに再び bind()

Question

私のゲームでは、関数の複数回の読み込みを停止するように見えるたびに、開始ボタンが 1 回だけクリックされるようにしたいと考えています。

クリック数をカウントし、カウントが 0 より大きい場合はアンバインドするコードをいくつか書きました。

var oneClick = 0;
$(".start-btn-wrapper").bind("click", function () {
    oneClick++;
        if (oneClick > 0) {
        $(this).unbind("click");
    }
        newGame();
});

これは正常に動作しますが、次に表示されるとき (再起動ボタンがクリックされたとき) に備えて再度バインドする方法が必要なので、カウントをリセットするためにこれを書きました。

$(".restart-btn").click(function () {
    resetGame();
    oneClick = 0;

});

何らかの理由でこれはうまくいかず、私は解決策を探しています

Answer 1

再度バインドするのではなく、イベント ハンドラーとしてテストされていない oneClick を変更するだけで、もうバインドされ$(".start-btn-wrapper")ません。

しかし、コストのかかるバインド解除/再バインドの代わりに、単にテストしてみませんかoneClick:

$(".start-btn-wrapper").bind("click", function () {
    if (oneClick++ > 0) return;
    newGame();
}

2 つの状態だけが必要な場合は、ブール値の方が明確であることに注意してください。

var clickable = true;
$(".start-btn-wrapper").bind("click", function () {
    if (!clickable) return;
    newGame();
    clickable = false;
}
$(".restart-btn").click(function () {
    resetGame();
    clickable = true;
});

Answer 2

jQuery には、まさにこの用途のためのメソッドが組み込まれています。それは.one()

だからあなたがしなければならないのは

$(".start-btn-wrapper").one('click',newGame);

そして再開へ

$(".restart-btn").click(function () {
    resetGame();
    $(".start-btn-wrapper").one('click',newGame);
});

Answer 3

単純

var oneClick = 0;
$(".start-btn-wrapper").bind("click", function () {

        if (oneClick > 0) {
        return false;
    }
        oneClick++;
        newGame();
});

$(".restart-btn").click(function () {
    resetGame();
    oneClick = 0;

});

Answer 4

var oneClick = 0;

function clickHandler() {
    oneClick++;
        if (oneClick > 0) {
        $(".start-btn-wrapper").unbind("click");
    }
        newGame();
}

$(".start-btn-wrapper").bind("click", clickHandler);

$(".restart-btn").click(function () {
    resetGame();
    oneClick = 0;

    $(".start-btn-wrapper").bind("click", clickHandler);
});