防止双击带有挖空.js按钮

Prevent a double click on a button with knockout.js

本文关键字：js 按钮 双击      更新时间：2023-09-26

禁用按钮的最佳方法是什么，这样就不会在挖空时双击.js。 我有一些用户进行一些快速单击，导致多个 ajax 请求。 我认为淘汰赛.js可以通过多种方式处理这个问题，并希望看到一些替代方案。

使用信号量（旋转锁）。基本上，您计算一个元素注册的点击次数，如果超过 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
}

我在表单向导通过按钮单击时通过 Ajax 提交数据时遇到了类似的问题。我们每个步骤都有 4 个有选择地可见的按钮。我们创建了一个布尔可观察ButtonLock，如果为 true，则从提交函数返回。然后我们还将数据绑定每个按钮的disable到可观察ButtonLock

视图模型：

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

如果您只需要防止多次点击，我更喜欢布尔值。但是计数器方法允许您检测双击并单独处理它们，如果您需要该功能。

以防有人仍在寻找一种方法来做到这一点。我发现你可以使用布尔值。

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

然后在你看来 

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

我使用自定义绑定执行此操作：

<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);
        })
    }
}
相关文章：