使用knockout.js防止双击按钮 [英] Prevent a double click on a button with knockout.js

问题描述

禁用按钮的最佳方法是什么，因此knockout.js不会发生双击。我有一些用户快速点击导致多个ajax请求。我假设knockout.js可以通过多种方式处理这个问题，并希望看到其中的一些替代方案。

What is the best way to disable a button so a double click doesn't occur with knockout.js. I have some users doing some quick clicking causing multiple ajax requests. I assume knockout.js can handle this in several ways and wanted to see some of the alternatives out there.

推荐答案

使用信号量（旋转锁）。基本上，您可以计算元素已注册的点击次数，如果它大于1，则返回false并且不允许以下点击。可以使用超时功能清除锁定，以便在5秒后再次单击。您可以从 http://knockoutjs.com/documentation/click-binding.html

Use a semaphore (spinning lock). Basically, you count how many clicks an element has registered and if it is more than 1 you return false and don't allow the following clicks. A timeout function could be used to clear the lock so that they could click again after say, 5 seconds. You could modify the example from 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
}

这篇关于使用knockout.js防止双击按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！