使用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 ，如果是真的，則從提交函數返回。 然后我們還將每個按鈕的disable數據綁定到ButtonLock observable

視圖模型：

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);
        }"/>

如果你只需要防止多次點擊，我更喜歡布爾值。 但是，如果您需要該功能，計數器方法可讓您檢測雙擊並單獨處理它們。

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