javascript - knockout.jsでボタンのダブルクリックを防ぐ

Question

knockout.jsでダブルクリックが発生しないようにボタンを無効にする最良の方法は何ですか。いくつかのユーザーがクイッククリックを実行して、複数のajaxリクエストを引き起こしています。私はknockout.jsがこれをいくつかの方法で処理できると思い、そこにある代替案のいくつかを見たかったのです。

Answer 1

セマフォ（スピニングロック）を使用します。基本的に、要素が登録したクリック数をカウントし、それが1を超える場合は、falseを返し、次のクリックを許可しません。タイムアウト機能を使用してロックを解除し、たとえば5秒後に再度クリックできるようにすることができます。http://knockoutjs.com/documentation/click-binding.htmlから例を変更できます

ここに見られるように：

<div>
 You've clicked <span data-bind="text: numberOfClicks"></span> times
 <button data-bind="click: incrementClickCounter">Click me</button>
</div>

<script type="text/javascript">
 var viewModel = {
     numberOfClicks : ko.observable(0),
     incrementClickCounter : function() {
         var previousCount = this.numberOfClicks();
         this.numberOfClicks(previousCount + 1);
     }
 };
</script>

入れ子関数内のロジックを次のように変更する

if( this.numberOfClicks() > 1 ){
 //TODO: Handle multiple clicks or simply return false
 // and perhaps implement a timeout which clears the lockout
}

Answer 2

ボタンクリック時にAjaxを介してデータを送信するフォームウィザードで同様の問題が発生しました。ステップごとに4つのボタンが選択的に表示されます。ブールオブザーバブルを作成し、ButtonLockそれがtrueの場合は送信関数から返されました。disable次に、各ボタンのデータを監視可能なものにButtonLockバインドします

ViewModel：

var viewModel = function(...) {
    self.ButtonLock = ko.observable(false);

    self.AdvanceStep = function (action) {
        self.ButtonLock(true);
        // Do stuff
        // Ajax call
    }

    self.AjaxCallback = function(data) {
        // Handle response, update UI
        self.ButtonLock(false);
    }

ボタン：

<input type="button" id="FormContinue" name="FormContinue" class="ActionButton ContinueButton"
    data-bind="
        if: CurrentStep().actions.continueAction,
        disable: ButtonLock,
        value: CurrentStep().actions.continueAction.buttonText,
        click: function() {
            AdvanceStep(CurrentStep().actions.continueAction);
        }"/>

複数のクリックを防ぐ必要がある場合は、ブール値を使用します。ただし、counterメソッドを使用すると、その機能が必要な場合に、ダブルクリックを検出して個別に処理できます。

Answer 3

誰かがまだこれを行う方法を探している場合に備えて。ブール値を使用できることがわかりました。

self.disableSubmitButton= ko.observable(false);
  self.SubmitPayment = function () {
        self.disableSubmitButton(true);
       //your other actions here
        }

それからあなたの見解では

data-bind="click:SubmitPayment, disable:disableSubmitButton"

Answer 4

私はカスタムバインディングでこれを行いました：

<button data-bind="throttleClick: function() { console.log(new Date()); }>
    I wont double click quicker than 800ms
</button>

---

ko.bindingHandlers.throttleClick = {
    init: function(element, valueAccessor) {
        var preventClick = false;
        var handler = ko.unwrap(valueAccessor());

        $(element).click(function() {
            if(preventClick)
                return;

            preventClick = true;
            handler.call();
            setTimeout(function() { preventClick = false; }, 800);
        })
    }
}