Question

最好的方法是用knockout.js使一个纽芬兰州陷入双重点击,我有一些用户迅速点击,提出多重亚克斯要求。我假定,js可以以几种方式处理此事,希望那里看到一些替代办法。

Answer 1

使用ema(lock锁)。基本上,你估计有多少人点击了某一要素的登记,如果是超过1人,你就会退回不实之处,也不允许进行以下点击。可以使用排时功能清除锁锁,以便它们在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>

By changing the logic inside the nested function to

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,如果是真的,则从呈文功能中恢复。然后,我们也将数据输入到<条码>可分,每个纽吨<条码>。

观点:

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

Button:

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

如果你只需要防止多次点击,我更喜欢 b。但是,如果你想要这一特征,反制方法让你发现双点,单独处理。

Answer 3

如果有的话,人们仍在寻求这样做的办法。我发现,你可以使用ean。

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

友情链接